Jens Oliver Meiert

One Favicon to Rule Them All

Post from August 18, 2021, filed under .

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.

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

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, 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 questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: 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.

Stay up-to-date? Follow me by feed or on Twitter.

Found a mistake? Email me, jens@meiert.com.

You are here: Home → Archive → 2021 → One Favicon to Rule Them All

Last update: August 18, 2021

Professional frontend developers produce valid HTML and CSS.