1999: Developers add one file to support a favicon.ico in IE5
2018: Developers add six hundred billion files for all combinations of icons and resolutions and colors and platforms and browsers whyyyyy did we do this to ourselves pic.twitter.com/527kR2OuNP— Zach Holman (@holman) February 20, 2018
Just two weeks ago, I saw a tweet by @holman, complaining about the current state of favicons on the internet. For those of you, that don’t know that a “favicon” is: It is short for favorite icon and is a small image that is representative of a website. It usually shows up before the url or inside of a tab in your browser. After I saw this tweet, I decided to also improve this website in order to support the favicon rules of 2018. Back in the early days of the internet all of this was rather straightforward. All you needed was a favicon.ico file in the root directory of your website and you would be all set and ready to go. 
And today this still works for the most part, but different companies have established new standards in order to use website logos in places such as mobile device home screens or pinned tabs.
In this post, I will list and describe the files that I use on this blog to adhere to these various standard, as well as point you to an easy to use solution to do the same! So let’s make sure my beautiful favicon shows up everywhere!
Favicon: Overview
In the table below, I list and describe the different files that I made available at the root of my website:
| Filename | Description | Source |
|---|---|---|
| apple-touch-icon-precomposed.png | Icon used for the homescreen on Apple devices. | Apple Touch Icons |
| apple-touch-icon.png | Icon used for the homescreen on Apple devices. | Apple Touch Icons |
| safari-pinned-tab.svg | Masked icon for the safari pinned tab. | Apple Documentation |
| browserconfig.xml | Browser configuration for the tiles on Windows 8 and 10. | Microsoft browser configuration |
| mstile-150x150x.png | The actual tile image for Windows. | Microsoft browser configuration |
| android-chrome-192x192.png | Icon used for the homescreen on Android devices. | Chrome Homescreen Documentation |
| favicon.ico | The classical favicon. Contains multiple sizes. | Favicon Wiki |
| favicon-16x16.png | Smaller version of the favicon. | Favicon Wiki |
| favicon-32x32.png | Medium version of the favicon. | Favicon Wiki |
| site.webmanifest | Defines different website information about the site (such as name, icon, and description). | Mozilla Webmanifest |
In general, I have also found audreyr’s github project favicon-cheat-sheet to be really helpful on all of this. Next, we will look at the actual HTML code needed to tell different browsers about all these files.
Favicon: HTML
There are four different standard we should suppport to work with the majority of clients and use cases. On the one hand, we need to make sure to adhere to the original favicon standard. On the other hand, we also want to comply with the new standards put forth by Apple, Google, and Microsoft. These new standards, like described in the table above, are mostly there to have a website image that can be used on a mobile home screen, a tab, or a computer desktop.
In order to tell the browsers about some of these files, I also added the following to the <head> of my webpage.<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="application-name" content="cwoebker">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#516930">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="apple-mobile-web-app-title" content="cwoebker">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#516930">
Favicons: Simple Solution
If you also want to adhere to these rules, you don’t have to figure everything out by yourself. There are various online tools that can automatically generate all the necessary code and files for you. I used https://realfavicongenerator.net. You can also use this tool in order to check for any current issues with your favicon configuration.
Stay tuned for my upcoming post about automating your deployments with gulp if you want to learn more about my current website setup.
