HTML - Favicon

A favicon stands for favorite icon, it is a small icon associated with a particular website, usually displayed in the browser's address bar, tab, or bookmarks. HTML allows us to add a favicon to our webpage so that we can display the logo of our business near to webpage title on the browser tab.

Syntax to add Favicon

Following is the syntax to add favicon to your webpage.

<head>
   <link rel="icon" 
         href="link/to/icon" 
         type="image/x-icon">
</head>

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 favicons of TutorialsPoint, Facebook, and Google highlighted in the red rectangle on the top of each tab.

Step to add Favicon to the Web Page

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 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 if you run the code locally.

List of Favicon Dimension

There are lots of sizes for favicon.

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

Note: Major browsers are not supported by the sizing property of the favicon.

Print Page