Different kinds of favicons in 2020


Shalu Saraswat

CTO, IT Junkies

What Are Favicons?

Shortened version of the term 'Favourite Icon', a favicon (fave-icon) is a small, iconic image which browsers mainly use to represent websites or web pages.

Now since we have covered what exactly is Favicon, let me give you a fun fact. Favicons were introduced by Microsoft way back in 1999. Surprised? I bet you are. For quite some time Favicons have been sidelined, however, as more and more businesses are undergoing the digital revolution, favicons are gaining more popularity. If you are wondering why the sudden interest, it's because they are a significant part of brand recognition. People are spending a great amount of time online, and your digital recognition is of great importance now more than ever.

Earlier days favicon meant just a 16x16px icon and placing it in a root directory of a website. With modern devices, pixels and graphics have changed and vary in different devices. The 16X16 pixel favicon icon appears pixelated on different types of screens. Thus to provide better favicons for different types of screens needs to be favicons according to their specifications.

A favicon icon Can be used in number of ways :

1. Address bar

2. Link bar


4. Tabs

5. Desktop icons

Different types of sizes according to device :

Size Used for
32x32 Standard size for most desktop browsers
128x128 Chrome Web Store icon & Small Windows 8
152x152 iPad touch icon, iOS 10
167x167 iPad Retina touch icon, iPad pro
180x180 iPhone Retina (iOS 8+)
192x192 Google Developer Web App Manifest Recommendation
196x196 Chrome for Android home screen icon

Other sizes :

Size Used for
57x57 Standard iOS home screen like - iPod Touch, iPhone first generation to 3G
76x76 iPad home screen
96x96 GoogleTV icon
120x120 iPhone retina touch icon, IOS 7
144x144 IE10 Metro tile for pinned site
195x195 Opera Speed Dial icon (Not working in Opera 15 and later)
228x228 Opera Coast icon

Link favicon into HTML :

You can add favicon by adding a link tag in the head of the document. Give path of image in href attribute. And set rel attribute. The rel attribute specifies the relationship between the current document and the linked document.

<-- Browsers -->

< link rel="icon" sizes="32x32" href="/path/to/favicon-32.png" >

< link rel="icon" sizes="57x57" href="/path/to/favicon-57.png" >

< link rel="icon" sizes="76x76" href="/path/to/favicon-76.png" >

< link rel="icon" sizes="96x96" href="/path/to/favicon-96.png" >

< link rel="icon" sizes="128x128" href="/path/to/favicon-128.png" >

< link rel="icon" sizes="192x192" href="/path/to/favicon-192.png" >

< link rel="icon" sizes="228x228" href="/path/to/favicon-228.png" >

<-- Android -->

< link rel="shortcut icon" sizes="196x196" href="/path/to/favicon-196.png">

<-- iOS -->

< link rel="apple-touch-icon" sizes="120x120" href="/path/to/favicon-120.png" >

< link rel="apple-touch-icon" sizes="152x152" href="/path/to/favicon-152.png" >

< link rel="apple-touch-icon" sizes="180x180" href="/path/to/favicon-180.png" >

<-- Windows 8 IE 10 -->

< meta name="msapplication-TileColor" content="#FFFFFF" >

< meta name="msapplication-TileImage" content="/path/to/favicon-144.png" >

Type of favicons supported by different browsers

Different browsers support different type of image file type. Here is the following type for some most common browsers :

Browser rel Type
IE 8 and below link rel="shortcut icon" ico
IE 9, IE 10 link rel="icon" type="image/x-icon" or link rel="shortcut icon" ico
IE 11 link rel="icon" ico, png, gif
Chrome link rel="icon" ico, png, gif
Firefox link rel="icon" ico, png, gif, svg*
Safari link rel="icon" ico, png, gif
Opera link rel="icon" ico, png, gif

Most of the browsers support png except IE.

Some people think if we have an option of Scalable Vector Graphics (svg) then why need to create different favicons for different screens. But as of now only Firefox and Safari support svg.


While favicons may seem small and insignificant, but like how the saying goes devil is in the details, your favicon is a very small detail that can affect the public perception of your site and brand. Having a favicon can actually make a huge difference in terms of user experience, online branding and even the volume of traffic it gets from search.

Latest Blogs

What Is GraphQL ? Why should we use it

Read More

Best practices while using Jetpack in Android

Read More

Integrating Google map in Angular

Read More