Please, take care of your Favicons
Favicons are compact versions of your or your client’s logo, that are required by modern browsers and digital devices. By considering the following tips you will have control on how users identify your site, which in turn will increase it’s recognition and might in turn affect it’s retention rate. I can’t believe no one wrote a simple article on that. Here it is, please consider using it.
Browser environment
Both on Desktop and on Mobile Browsers, there are places like browser tab, recent app switch, the new (or recently visited) tab page, and other, where interface expects you to have an icon ready. To be honest, we don’t like abundance of favicons in modern browsers, because it creates so much visual noise that doesn’t help, and we particularly like the direction taken by Safari, that are not using them for Browser Tabs, in Browser History and in the Bookmarks on iOS, but even Safari has them inside the address input area, so, you better get them ready.
To cover all of the Browser necessities, you basically need three sizes and an .ico file in the root of your site. Three sizes are required for various pixel densities. “.ico” file is required in case something goes wrong, to let browser find the backup icon.
1. 16x16, Favicon, PNG
2. 32x32, Favicon, PNG
3. 48x48, Favicon, PNG
<head>
...
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="48x48">
...
</head>• Besides calling for all icons in the <head> section of your website, put all three files inside of one .ico file. File needs to be named as favicon.ico and uploaded to the root of your site. You can use third party apps like Icon Slate App that make it easier to export .ico files.
• Reference: Favicon Cheat Sheets
iOS
In iOS, by using Safari Browser, every user may save your website to the Home Screen of their device, which will make it perceived as a web based application or work as a bookmark. For you to control it’s branding, you need to prepare and provide a few files referred to as Apple Touch Icons.
1. 57x57, legacy iOS devices, PNG
2. 120x120, iPhone, PNG
3. 152x152, iPad & iPad Mini, PNG
4. 167x167, iPad Pro, PNG
5. 180x180, iPhone, PNG
<head>
...
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/favicon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
...
</head>• Icons should be saved on square white background with no transparency
• Reference: Human interface guidelines
Android
1. 96x96, Google TV, PNG
2. 192x192, Android devices, Home Screen, PNG
<head>
...
<link rel="icon" sizes="96x96" href="/favicon-96.png">
<link rel="icon" sizes="192x192" href="/favicon-192.png">
...
</head>• Reference: Google Developers
• You can choose icon of any shape, but for it to look native to Android, we chose it to be white square with compact logo on top of it.
If you want to include Windows support, consider reading the Windows Dev Center or a good article for that matter on Google Developers.
Thanks to Alexandru Burca, and Paul Bakaus for help and references in writing this article. Download Sketch Template.
