I always appreciate someone looking into and re-evaluating the best practices of something that literally every website needs and has a complex set of requirements. Andrey Sitnik has done that here with favicons.
The final suggestion:
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">{
"icons": [
{ "src": "/192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/512.png", "type": "image/png", "sizes": "512x512" }
]
}It was good timing to do this here on CSS-Tricks, so I tried following the advice to the letter, and it’s working great so far. I think I got fed up at how complex it was at some point that I went ultra-minimalist and only had favicon.ico file. Now I’ve got all of the above in place.
Where I differed…
- I don’t have GIMP or Inkscape installed, which can export
.icoformat, so I used this favicon generator (I fed it my “main” SVG”) just for that one icon. - I found Figma helpful for resizing frames and exporting the right sizes.
- I used ImageOptim for optimizing all the images.
- I was nervous about adding a “manifest” because I don’t have any other PWA-like steps in place and it feels like an extra web request for little value. But I did it anyway.
- I have a theme color (
<meta name="theme-color" content="rgb(255, 122, 24)">) because I was told it was a nice touch. Feels related.
I love the dark mode SVG concept:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<style>
@media (prefers-color-scheme: dark) {
.a { fill: #f0f0f0 }
}
</style>
<path class="a" fill="#0f0f0f" d="…" />
</svg>But I didn’t do any trickery there as I think my icon looks fine either way without changes:
I also haven’t gotten around to making a special development-only favicon again, but I will because I find it extremely handy.
