- Español – América Latina
- Português – Brasil
- Tiếng Việt
Building an adaptive favicon
A foundational overview of how to build 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:
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.
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:
Here's my SVG file, I've sized the viewBox relevant to my artwork:
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:
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 <head> tag of your HTML, after the .ico favicon, add the following:
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:
Like HTML, you can add a <style> tag to the markup for use against that document scope:
The light theme version will be the default coloring of my favicon SVG. The styles I wrote for that were mostly stroke and fill colors:
Next, the most fun part, styling the dark theme version of your favicon. The styles for that will go into a media query within the style tag:
Mine ended up like this:
I chose to swap the bright purple borders for a nice cool dark gray ( #343a40 ), changed the skull bone color from white to a light cool gray ( #adb5bd ), but left the pink accent hat.
Now that you know how I did it, how would you‽ 🙂
Let's diversify our approaches and learn all the ways to build on the web. Create a demo, tweet me links, and I'll add it to the community remixes section below!
Community remixes
- Where I learned of this technique: @tomayac on his blog
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-02-09 UTC.
IMAGES