One Favicon to Rule Them All

Post from August 18, 2021 (↻ January 23, 2022), filed under (feed).

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:

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 the Document 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.


To ship an SVG favicon.ico you need to do two things:

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

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

    (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!

Toot or tweet about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead 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 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!