HTML - Adding Favicon

What is a HTML Favicon?

A favicon is a small image that represents your website and helps users identify it among multiple tabs, bookmarks and search results. It can be in various formats, such as ICO, PNG, GIF, JPEG, or SVG, but ICO is the most widely supported format. If you have ever visited a website and noticed a small icon next to the page title in your browser’s tab, you have seen a favicon.

Visual Representation Favicon

In the above figure, we can see the favicon of the tutorialspoint official website appear on the top of each tab.

How to add a Favicon for a Webpage?

To add a favicon, we need to follow these simple steps mentioned below −

Step 1 − Create or choose an image for your favicon. Its common size could be 16x16 pixels or 32x32 pixels. There are a few online tools available that helps us in creating a favicon such as Favicon.io and ionos.com.

Step 2 − Save and upload the favicon image to the website directory. Make sure the image must be in a format that browsers can recognize, such as PNG, GIF, or ICO.

Step 3 − Now use the <link> element which tells the browser where to find the favicon image. Remember, the <link> tag comes inside the header part i.e. <head> element of HTML document.

Example

The following example illustrates how to create an HTML favicon. We are using the PNG image format.

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</title>
   <link rel = "icon" type = "image/png" href = "images/faviconTP.png">
</head>
<body>
   <h1>Adding Favivon</h1>
   <p>This is an example of including favicon to the web page.</p>
   <p> Favicon will be displayed in the browser tab to the left of the page title.</p>
</body>
</html>

Output

The above HTML code will produce the following result −

Adding Favicon

Attributes of <link> element

Following is the list of HTML <link> element attributes that are used while adding a favicon −

S.No. Attributes & Description
1

rel

It specifies the relationship between the current document and the linked resource. For a favicon, its value should be icon.
2

type

It specifies the MIME type of the linked resource. For a favicon, its possible values could be image/x-icon or image/png depending on the format of the image.
3

href

It specifies the URL of the linked resource.

Browser Support for different Favicon File Format

The table below illustrates the various favicon file formats that are supported by different browsers −

Browser GIF PNG JPEG SVG ICO
Chrome Yes Yes Yes Yes Yes
Edge Yes Yes Yes Yes Yes
Safari Yes Yes Yes Yes Yes
Firefox Yes Yes Yes Yes Yes
Opera Yes Yes Yes Yes Yes
Advertisements