Favicon in HTML

Favicon in HTML with Examples

In this article, I am going to discuss Favicon in HTML with Examples. Please read our previous article where we discussed Links in HTML with Examples. At the end of this article, you will learn everything about HTML Favicon with Examples.

Favicon in HTML

A favicon is a tiny file that represents a website or a blog. It’s also referred to as a tab icon or a website icon. In the browser tab, the favicon displays next to the page title.

The image of a favicon is saved as a .ico file. There are several file types, but all browsers support the.ico format. In the browser tab, a favicon image is displayed to the left of the page title. Look at the example below.

Favicon in HTML with Examples

How to Create Favicon?

To add a favicon in the Html file we need to store the favicon file inside the root directory. We can create a favicon file on favicon.cc or we can download a favicon from flat icons.

How to insert Favicon in HTML File?

To insert a favicon file in Html <link> element is used to insert external source files and stylesheets inside the HTML document.<Link> is an empty tag it is always placed inside the head tag of the Html document.

Syntax to use Favicon in HTML

The below syntax is used to link the favicon in the Html document.

<link rel=”icon” href=”favicon.ico”>

In Html, the rel attribute is used to define the relationship between the Html document and the linked document.

Example to use Favicon in HTML

Look at the example below to understand how to add a favicon to the website. We can add a favicon in different file formats. For this tutorial, we will use a png file that we have downloaded from flat icons.

Example to use Favicon in HTML

Favicon Example:
<!DOCTYPE html>
        <link rel="icon" href="robot.png">
        <title>Favicon Tutorial</title>
<p>We have added favicon to a website</p>

When you run the above HTML code, you will get the following output in the browser.

Favicon in HTML with Examples

In the next article, I am going to discuss Colors in HTML with Examples. Here, in this article, I try to explain Favicon in HTML with Examples and I hope you enjoy this HTML Favicon with Examples article.

Leave a Reply

Your email address will not be published. Required fields are marked *