One Favicon to Rule Them All

Published on August 18, 2021 (↻ February 5, 2024), filed under Development (RSS feed for all categories).

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

SVG ICO

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
   </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 worked as a technical lead and engineering manager for small and large enterprises, 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.)