One Favicon to Rule Them All
Post from August 18, 2021 (↻ January 23, 2022), filed under Web Development.
I think the situation around favicons sucks. For an HTML minimalist, the ideal world consists of this when it comes to defining a website or app icon:
- one image file
- no code
This would be the minimum. For configuration it would be nice to have options to define additional icons, perhaps in a central place (an HTTP header?) rather than on a document level (which can still be fine), but this, one image, no code, is the minimalist’s dream.
But we aren’t there—or are we?
Surprisingly, we’re closer than one may think.
For one image file, there is majority support for SVG favicons. (That’s useful because a vector graphic is able to serve more sizes, and can be more efficient, than a raster graphic.)
For no code, the HTML specification has this little historical provision where, simply put, it asks user agents to look for “favicon.ico” in the domain root:
Let request be a new request whose URL is the URL record obtained by resolving the URL “
/favicon.ico” against the
Documentobject’s URL .
You may know or have made the connection—there seems to be a gap between providing an SVG and being asked for an ICO, but that gap can be bridged.
To ship an SVG favicon.ico you need to do two things:
Save your preferred SVG site or app icon as “favicon.ico” (“.ico” to make use of aforementioned fallback), and store it in the root of your project.
Configure your server to deliver “favicon.ico” as an SVG, which takes the MIME type
On Apache, you can do it like this:
<FilesMatch "favicon.ico"> Header always set Content-Type: image/svg+xml </FilesMatch>
(Let me know if you have suggestions or other server configs at hand, and I’m happy to add them here, with credit.)
This works. It’s not perfect—my tests match “Can I Use” data for SVG favicon support—, so depending on your preferences and needs you may want to balance it out with other icons and maybe some markup. But for the hardcore minimalist, this is a solution.
What do I do? In my personal projects—commercial needs are different—I avoid all markup and provide a favicon.ico (64×64) as well as an apple-touch-icon.png (180×180). You may not like that because it’s not perfect, either. It has worked for me, so far, but I’m now thinking about the approach described above. The bet to be made, it seems, is on increasing support for SVG favicons. If that was higher, it would be a no-brainer.
If you’re also interested in learning more about minimal HTML, check out A Short Guide to Minimal Web Development, Optional HTML: Everything You Need to Know, as well as my Upgrade Your HTML book series. Squeeze everything out of your markup. Cheers!
I’m Jens, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
Have a look at the most popular posts, possibly including:
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.