Favicon Madness in 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. Favicon 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:

apple-touch-icon-precomposed.pngIcon used for the homescreen on Apple devices.Apple Touch Icons
apple-touch-icon.pngIcon used for the homescreen on Apple devices.Apple Touch Icons
safari-pinned-tab.svgMasked icon for the safari pinned tab.Apple Documentation
browserconfig.xmlBrowser configuration for the tiles on Windows 8 and 10.Microsoft browser configuration
mstile-150x150x.pngThe actual tile image for Windows.Microsoft browser configuration
android-chrome-192x192.pngIcon used for the homescreen on Android devices.Chrome Homescreen Documentation
favicon.icoThe classical favicon. Contains multiple sizes.Favicon Wiki
favicon-16x16.pngSmaller version of the favicon.Favicon Wiki
favicon-32x32.pngMedium version of the favicon.Favicon Wiki
site.webmanifestDefines 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.

By Cecil Wöbker

I do science during the day and develop or design at night. If you like my work, hire me.

Feel free to follow me on Twitter or email me with any questions.