By Gabriel Reimers
When we built the Loqbooq web app, we had to solve lots and lots of technical challenges. For most things it was quite easy to google for a solution.
However, when we wanted to set the favicon for the page, we could not find an up-to-date article on what favicon sizes and formats we should provide. There are complete favicon-generators on the web that create all possible variations and formats of your icon.
But we wanted to only include what is really needed by modern browsers to keep our code clean. It seems, for one of the most common tasks in web design — giving your page an icon — there was no up-to-date summary on how to do it. So we want to share what we learnt after hours of research.
To include favicons for your website, simply add a <link> tag for each size in your <head>.
They should look like this:
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
The rel attributes must be set to icon to tell the browser it is a favicon. The type must match your icon file’s type (usually PNG). The sizes property is important because you will have multiple icons in different sizes (see next section). Finally set the href attribute to your icon file path.
Browsers display the favicon in the tabs, the address bar and in the bookmarks list. For all of these, the icons are displayed in 16x16 points. On modern computers (Macs in particular) and smart phones with higher resolution screens, you need an image with double resolution of 32x32. So you need two icons for that:
<!-- For all browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
Search engines like Google will also display a favicon next to each search result. While DuckDuckGo uses the same icon as browsers (16x16 or 32x32), Google shows a slightly bigger icon of 48x48. In fact, Google explicitly states that they don’t display 16x16 icons. Google will take any icon of size 48x48 or multiples of it.
That is also the default icon size of apps on the Android home screen. So when users want to pin your website as a shortcut to their Android home screen you should also provide icons in multiples of 48x48. We recommend providing one in 48x48 and one in 192x192, which is the size Android devices with the highest resolution need. As 192x192 is four times the size of 48, it can easily be scaled down without artifacts in case intermediate size is needed.
<!-- For Google and Chrome -->
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
On the iPhone and iPad users can pin a website to their home screen (just like on Android) where it will appear similar to a native app icon. Apple again uses different sizes for their icons. For the iPhone they need to be multiples of 60x60. As all iPhones have retina or super retina displays for many years now, it is sufficient to provide one icon in 180x180. On the iPad app icon sizes are 83.5x83.5 (seriously). But as all iPads have retina displays for over 10 years now, it is also sufficient (and recommended) to only provide one icon sized 167x167 pixels.
Apple being Apple, they have one more thing on favicons: To make Safari properly recognize your homescreen icons, they must be marked with rel="apple-touch-icon" instead of rel="icon".
<!-- For iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
<!-- For iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
Attention: On the internet, you will often find articles stating that for Apple Safari the link rel attributes should be apple-touch-icon-precomposed. This is totally outdated. The -precomposed suffix has been deprecated since iOS 7 (released in 2013).
In the olden days, browsers would look for a file named favicon.ico in your root directory. This is no longer needed because all browsers (even Internet Explorer) now read the <link> tags in your header. Not providing a .ico file also reduces effort on your side because .ico is a Windows format and it is not supported by many graphics editors. So it always was a bit of a hassle to convert a PNG to ICO.
In theory, with SVG one single icon file would cover all use cases. But SVGs are not supported by all browsers (especially not by Safari) and you cannot be sure all services (like Google, other search engines, social media platforms, Android and iOS home screens etc. ) support them.
So, in the end, you will want to provide PNGs in multiple sizes anyway and there is little benefit in providing a SVG additionally.
Most favicon generators and also some HTML boilerplate templates also include code for a web manifest JSON file. You probably don’t need it.
Web manifests are intended for progressive web apps. That is websites that behave like native mobile apps and integrate deep into the operating system. So far, web manifests are only supported by Android but not a requirement for your app to be added to the home screen. A web manifest might make sense if your audience is Android specific or your users are especially inclined to add your website to their home screen. For most websites, however, it is not worth the effort to create a web manifest.