Modern Favicons

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.

note

The most comprehensive and up-to-date overview I could find is Audrey Feldroy's favicon cheat sheet. This is where I started from.

Design Considerations

Dark Mode

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.

Using 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.

Touch Bar

TODO

What most people should care about

note

Chrome now supports SVG favicons, but I don't recommend them as standard practice just yet.

favicon.ico

Create three transparent PNGs - 16x16, 32x32, and 64x64 - and combine them into a single favicon.ico file using imagemagick's convert utility:

convert favicon-16.png favicon-32.png favicon-64.png favicon.ico

Some people suggest automatic scaling with imagemagick, but I don't recommend it because icons this small usually need some size-specific tweaks.

Place favicon.ico in your site root, and it will become the automatica fallback. There's no need to reference it in the head.

favicon.png

Some browsers will prefer this to the .ico file if you provide it, typically in HiDPI settings. A 64px x 64px PNG is fine.

<link rel="icon" href="favicon.png">

apple-touch-icon

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.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

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

• favicon.ico
• favicon.png
• apple-touch-icon
• mask-icon

mask-icon

• svg layers
• exporting from sketch

What other sites do

• google
• twitter
• HN
• Apple