HTML - Favicon

HTML favicon stands for ” favorite icon” . It is a small-sized image that displays in the browser’s tab just before the page title. Favicon is defined by using the <link> tag with the ” rel=icon ” attribute.

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 of a Favicon

The below image demonstrates how a favicon looks like on the browser’s tab:

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

How To Add a Favicon in HTML

You can add a favicon to a webpage by using the <link> tag with the rel attribute set to “icon” . The <link> tag is a head element , so it must be placed within the <head> tag.

Syntax

You can add a favicon on the webpage as follows:

<head>

  <link rel="icon" href="path_to_favicon.ico" type="image/x-icon">

</head>

Steps to Add Favicon on 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 help 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 is 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> tag of the HTML document.

Example

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

Output

The above HTML code will produce the following result −

Different Favicons for Different Pages on a Website?

Yes, different favicons can be added for different pages on a website. You need to define the favicon images for different pages using the <link> tag (as discussed above) inside the head.

Example

Consider the following code snippets for the different pages:

For Webpage 1:

<head>

  <title>Page Title 1</title>

  <link rel="icon" href="favicon1.ico" type="image/x-icon">

</head>

For Webpage 2:

<head>

  <title>Page Title 2</title>

  <link rel="icon" href="favicon2.ico" type="image/x-icon">

</head>

Favicon Dimensions and Sizes

The following is a list of the various sizes for favicons:

Browser Support for Different Favicon File Format

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