One Favicon to Rule Them All
Published on AugĀ 18, 2021 (updated FebĀ 5, 2024), filed under development, minimalism (feed). (Share this on Mastodon orĀ Bluesky?)
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?
Status Update
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 theDocument
objectā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.
SVG ICO
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
image/svg+xml
.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 curious about how I arrived here, see not only the post linked earlier but also Rephrase icon
section and Implement favicon.svg fallback in the WHATWGās HTML repo.
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!
About Me
Iām Jens (long: Jens Oliver Meiert), and Iām a web developer, manager, and author. Iāve been working as a technical lead and engineering manager for companies youāve never heard of and companies you use every day, Iām an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for OāReilly and Frontend Dogma.
I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)