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.
In the above figure, we can see the favicon of the Bing 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 = "logo2.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 −
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 |