Building an adaptive favicon

In this post I want to share thinking on how to build an adaptive favicon with SVG. Try the demo.

If you prefer video, here’s a YouTube version of this post:

Overview #

A custom favicon is a great way to polish a web project. It displays on desktop browser tabs, and also inside “save for later” readers, other blog posts linking to your site, and more. Traditionally this has been done with the .ico file type, but recently browsers have allowed use of SVG, a vector format. Using progressive enhancement you can serve well supported .ico favicons, and upgrade to an .svg if available.

SVG is able to scale up and down without quality loss, and can potentially be very small in size, they can also have embedded CSS, even embedded media queries. This means if an SVG favicon is used in a reader app or bookmarks bars, there’s a chance the user could get a theme relevant (light or dark) icon due to dark preference styles provided inside the SVG. The SVG then adapts using its embedded styling for light and dark user preferences.

Markup #

SVG markup is XML using an .svg file type extension which allows it to hold more dynamic types of code.

Start by making favicon.svg #

Make a new file called favicon.svg and add the following:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
svg>

Here’s my SVG file, I’ve sized the viewBox relevant to my artwork:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
svg>

Adding shapes and paths #

Next, add SVG path code. Often this means opening the SVG in a code editor, but that code is generally not human friendly. Here’s a great guide that guides you through exporting and optimizing SVG from design tools.

The artwork for this GUI Challenge came from a designer who made it in Adobe Illustrator. I heavily optimized it. I ran it through SVGOMG and then hand-edited the cruft away.

Here’s an example of the skull artwork path group from mine, after cleaning it:

svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">





svg>

Notice the human readable ID selectors like #eyes-and-nose and classes like .favicon-stroke. These are from my hand editing, in preparation for CSS. Adding classes and ID’s is not required for your SVG to be an adaptive favicon.

Link the favicon SVG from HTML #

In the tag of your HTML, after the .ico favicon, add the following:

link rel="icon" href="/favicon.ico" sizes="any">

As the new icon may look identical to the .ico version verify that it is being used. Open the Network panel of DevTools. Filter by images and search for favicon:

Styles #

Like HTML, you can add a