Question
What favicon sizes should I use in 2022?
In the past I have always used this website to generate all the favicon sizes:
https://realfavicongenerator.net
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).