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.
A quick light and safe way.
Both favicon.ico and apple-touch-icon.png named as this and placed in the root server directory can save some metas…
The favicon.ico is always checked by browsers and iOS and Android devices did that too with apple-touch-icon.png.
I just add theme meta and a svg icon and another svg icon dedicated to safari.
That’s it!
There is a also a new masked icon recommended if you using a manifest, I tried it but finally quit using manifest, it’s just too weird how Chrome device/desktop do whatever he wants with it, it’s really only for splashing screens with the «website as an app» stuff.
The latest time I checked, that stupid Lighthouse returns an error if apple-touch-icon.png is just placed in the root, but if I declare it and using dedicated icons in the manifest, Chrome just use the… apple icon over them.
There is French expression for that: mais de quoi je me mêle !
I wrote this with an iPad and that was really painful. :D
Do you know how you can use preload on
this is to increase the page speed, by preloading the favicon in WordPress?
where can i find info on how manifest.webmanifest is filled out? i didn’t find MDN particularly helpful, but i’m new to this. thanks!
There’s a nice follow-up article by Lee Reamsnyder, who corrects where Andrey Sitnik didn’t fully get it right.
Chris, I noticed you removed the size=”any” attribute recommended in Andrey Sitnik’s article for the favicon.ico link. But this wasn’t mentioned in your ‘Where I differed…’ section.
Was this intentional?
Not intentional—I must have just missed it. I’ll slug it in there and watch for side effects.
Excellent article!
In case you didn’t know, you were quoted by Masa Kudamatsu in his (also excellent) article Definitive edition of “How to Favicon in 2021”.
It is very well out out, eith many sources referred to.
The final approach is very similar to what you have here.
Definitely what I am going to use in my app(s)!
What are we missing out on if we don’t care about PWA functionality and don’t include the manifest file and icons? I know for Apple devices, the touch icon is used for things like Reading List, are there similar benefits?