Have you noticed how all or 99% of your browser tabs have their own distinguishing logo on the side? Well that was the coolest thing (back in 1999) when Internet Explorer first supported it. This little image or icon is referred to as the favicon, which stands for favorite icon. Although not required, the favicon is now pretty standard, used also for shortcuts across multiple devices. So all websites and web apps should implement favicon(s) to distinguish themselves.
Adding a Favicon – The Traditional Way
Let’s suppose you’ve finished your kick-ass app using the latest technology. You now want to add some flare and make sure that when someone visits your URL, it has a distinguishable icon that identifies your app. You have your design ready, and now you want to add your favicon to the page.
First you have to make sure your image is either already an ICO file or save it as PNG (to preserve transparency) of at least 16×16 size and then convert it to ICO.
Why are we converting to ICO? Because browsers have many resolutions, and traditionally favicons are also used as shortcut icons. So an ICO file will actually contain many PNG images inside to support different resolutions and shortcuts.
You can use one of the many online tools out there to convert an ICO from a PNG image.
Your browser will pick your favicon from by just dropping the file on the root directory. However, as practice, let’s add the favicon.ico to the index.html between the
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Refresh and check your icon pop up on the tab! Breeze.
Note: If you ever get a “favicon.ico Not Found error”, just make sure the icon is named
favicon.ico, placed at the root folder and that your index.html is placed accordingly in relation to the favicon.
More Favicons – For Better Compatibility
You might notice that when you add the ICO favicon, it might not work perfectly across all resolutions or shortcuts. This is because the ICO format is not as reliable anymore. To fix this, HTML5 introduced the
sizes attribute so we could rely directly on PNG files. So today we don’t have to necessarily compress a PNG to an ICO!
We can just save our PNG image in three sizes to match the favicon.ico (16×16), taskbar (32×32) and shortcut icons (96×96). Then our HTML
<head> tag can be changed as:
<link rel="icon" type="image/png" href="/favicon16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon96x96.png" sizes="96x96">
This should make our website or app more consistent with modern standards!
Getting More Complex
When it comes to mobile support or even larger displays, our favicon list can continue expanding. Take for example the
apple-touch-icon, which is basically the icon when you add to the home screen on an iOS device. Well, if you want to optimize for iOS devices, yes you’ll need a specific favicon for that.
So behold, our list of favicons grows:
<link rel="apple-touch-icon" sizes="72x72" href="touch-ipad.png" > <link rel="apple-touch-icon" sizes="114x114" href="touch-iphone.png" > <link rel="apple-touch-icon" sizes="152x152" href="touch-ipad-ret.png" >
Then you might ask, what about Android devices? Wait, how did we get from that single and fabulous favicon.ico to an ever-growing list of them? 🤦🏻♂️😅
There are great open source references and plenty of favicon generators to help you in your way. However, the reality is that often for a smaller app or portfolio project, you might not have the time or bandwidth to cover most or all of the favicon instances.
At the end it all boils down to your own needs. Feel free to experiment with what works with you. One strategy will be to start by having a 16×16 PNG, 32×32 PNG and 152×152 PNG favicons, and expand from there. You could also keep it simple and stick to the old fashioned favicon.ico, it is still supported so there’s nothing stopping you from doing that. Just note as your app or project grows you’ll need to add/replace with PNG favicons.
So, if you came here to learn about how to implement a single favicon to show it on the tab and maybe a shortcut, you’re wrong. Today, there are a minion favicons to display across all devices, shortcuts, home-screen, and yes the list keeps growing!