Simplifying Favicons for the Modern Web

October 2, 2021

First of all, adding a favicon to your website used to be very simple. You'd just created a .ico file (which usually contains sizes 16x16, 32x32 and 48x48) and put it in the root directory. Then you would add to the head of your website:

<link rel="icon" href="./favicon.ico" type="image/x-icon">

Nowadays, a favicon is a far more advanced topic because we need to take care of specific stuff created by Google, Apple and Microsoft. However, there is no consensus on exactly how we should use favicons, so different people suggest different solutions. Therefore, adding a simple favicon to the site you're developing can become a nightmare.

Recommended steps

Create a favicon in the SVG format.
Use RealFaviconGenerator to generate all necessary files. You only need to pay attention to the section Favicon for iOS - Web Clip. Don't forget to apply compression in Favicon Generator Options (the percentages don't reflect the truth, so I recommend selecting "very high quality" to be sure).
Move these files to the public folder (you can delete the rest of them):
- favicon.svg
- favicon.ico
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
Open the file site.webmanifest and change name, short_name, theme_color and background_color.
In the <head> element of your HTML document, insert:

<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<link rel='apple-touch-icon' href='/apple-touch-icon.png' />
<link rel='manifest' href='/site.webmanifest' />
<meta name='theme-color' content='#bd93f9' />

You can use the same theme color as you used in site.webmanifest.

FAQ

Check Masa Kudamatsu's definitive edition of "How to Favicon in 2021" for more answers.

What about referring to the .ico in HTML?
- The favicon.ico is detected by browsers automatically, so don't worry about it. But the problem is that Chromium-based browsers will choose to use favicon.ico instead of favicon.svg if you refer to it.
What about those other files generated by RealFaviconGenerator?
- They are all optional with specific use cases (mostly legacy stuff). I don't recommend worrying about them.
While RealFaviconGenerator does a good job, it only allows you to create favicons from pictures that are up to 2 MB in size. What about using this favicon generator instead?
- You could resize the image to a lower resolution since the exported favicons would be maximum 512x512 or you could convert it from PNG to JPG if it's the case. I'd say a 2 MB image is just too large, it should be less than 200 kB. You can fix it running ImageMagick.

Breno Baptista is a software engineer who likes to explore new things every day. He is interested in Linux, open-source software, digital privacy and front-end development.