Favicons in 2020
I've never really put much thought into favicons, but I'm trying to be more diligent about understanding the individual components that go into my default workflows. To that end - and in the process of building this site - I decided to take some time to get to know the state of favicons today.
The most comprehensive and up-to-date overview I could find is Audrey Feldroy's favicon cheat sheet. This is where I started from.
Always double-check the contrast of your favicon versus the browser chrome in dark mode. Typically you want an average ratio of at least 4.5:1.
Below that, most browsers will render it but people may not be able to see it. Safari will go one step further: if it's unhappy with the contrast ratio, it'll give your icon a white background that...does not look the best.
I'm not sure exactly what Safari's minimum contrast ratio is, but it seems to be around 2:1.
prefers-color-scheme to swap favicons
This has been tried, but it doesn't seem to work very well thanks to the way browsers cache favicons. For now, focus on making the primary icon work.
What most people should care about
Chrome now supports SVG favicons, but I don't recommend them as standard practice just yet.
Create three transparent PNGs - 16x16, 32x32, and 64x64 - and combine them into a single
favicon.ico file using imagemagick's
Some people suggest automatic scaling with imagemagick, but I don't recommend it because icons this small usually need some size-specific tweaks.
favicon.ico in your site root, and it will become the automatica fallback. There's no need to reference it in the
Some browsers will prefer this to the
.ico file if you provide it, typically in HiDPI settings. A 64px x 64px PNG is fine.
There are a lot of recommended resolutions for this, but 180px x 180px covers all modern use cases on both iOS and Android. Both will automatically mask the corners, so keep it square.
What about apple-touch-icon-precomposed?
This isn't supported by recent iOS versions, so there's no need to worry about it.
What I ended up with
- svg layers
- exporting from sketch
What other sites do