Just two weeks ago, I saw a tweet by @holman, complaining about the current state of favicons on the internet.
For those of you who don’t know what 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 standards, 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 standards to support if you want to cover 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. For the original build that this whole site is layered on top of, see Jekyll Blogging.
I lead engineering at remberg—software for the industrial world, with the team in Munich. I think about what is worth building, how it runs in production, and how an org stays fast as it grows. I write about it here, on X, and in the newsletter below.
Newsletter
Occasional email updates — no spam. Unsubscribe in one click.
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.