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
3. Bookmarks
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.
Conclusion
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.
