HTML - Favicon

Quiz

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 tutorialspoint 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:

<!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 −

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:

Favicon Dimension	Used For
32x32	Desktop Browsers
57x57	Mac ios
76x76	Apple ipad
96x96	Google TV
120x120	Iphone Retina Touch Screen
128x128	Chrome Web Store, Windows 8* Screen
144x144	Internet Explorer 10 Metro
152x152	Apple Ipad
167x167	Apple Ipad
180x180	Apple Iphones
192x192	Google Developer Apps
195x195	Opera Speed Dial
196x196	Android Home of Chrome
228x228	Opera Cast Icon

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

Print Page