All you need is 1 favicon

Question

What favicon sizes should I use in 2022?

In the past I have always used this website to generate all the favicon sizes:

However I wonder if it’s still necessary in 2022 to include all those favicons… It’s a real mess.

Is there a better / clean solution for modern browsers? What sizes do you use?

Answer

I have made some tests with all major browsers / OS and I can say that in 2022 you only need 1 favicon for your website:

<link rel="icon" type="image/png" sizes="512x512" href="/icon-512x512.png">

Everything else is boring and unnecessary. All the different sizes derive from the past: today it doesn’t make sense to provide tens of icons of different sizes and format.

All modern browsers support the rel="icon" notation, can deal with PNG icons and can scale them down automatically.

I have tried the above code and it works perfectly in Chrome (Desktop and Android), Firefox, Safari (no rel="apple-touch-icon" necessary!) and other browsers.

If you want even better scaling you can use an SVG image instead:

<link rel="icon" href="/icon.svg">

Doesn’t it look awesome? This is definitely the future (the only downside with this SVG favicon alone is that it’s not supported yet by Safari).