<p>Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have. But does your website actually use one? </p> <p>The task is more non-trivial than you might think. As we will see in this article, creating a useful SVG favicon involves editing an SVG file manually, which is something many of us try to avoid or are uncomfortable doing. Plus, we are talking about a favicon. We can spend a few hours playing with a hot new CSS framework. But a favicon? It sometimes feels too small to be worth our time. </p> <p>This article is about creating an SVG favicon for real. If you’re in front of your laptop, get the vector file of a logo ready. By the end of your (active!) reading, your SVG favicon will be ready to shine. </p> <p>Why an SVG favicon at all? </p> <p>We are here for the “how” but it’s worth reflecting: what is an SVG favicon even good for? We already have other file types that handle this, right? </p> <p>SVG is a vector format. As such, it has valuable features over raster formats, including those typically used for favicons, like PNG. SVGs scale and are often more compact than its binary cousins because, well, they’re just code! Everything is drawn in numbers and letters! </p> <p>That’s good news, but how does this help our favicon? Desktop favicons are small, at most 64×64. And you can ship your icons in several resolutions. Scaling is a feature we don’t really need here. </p> <p>File size is another source of disappointment. While SVG has a clear edge over a high resolution PNG file, the tables turn in low resolution. It is common for a 48×48 PNG favicon to result in a smaller file size than its SVG equivalent. </p> <p>Yet, we have a good reason to pay attention to SVG favicon: dark mode support. </p> <p>Dark mode has received a lot of attention recently. You may even have implemented dark mode for your own websites. What does that mean for favicon? It means the ability to show different icons based on the brightness of the browser tab’s background. </p> <p>We are going to prepare such an icon. </p> <p>How to create an SVG favicon (in theory) </p> <p>Getting dark mode support for an SVG favicon relies on a CSS trick (10 points to Gryffindor), namely that we can drop a tag right inside SVG, and use a media query to detect the user’s current theme preference. Something like this: </p> <p> @media (prefers-color-scheme: dark) {<br /> // Your dark styles here<br /> }</p>