How To Create an Adaptive SVG Favicon Using the prefers-color-scheme Media Query

Do you know how to create a favicon that adapts to a light or dark color scheme automatically in a single file? This is precisely what you'll learn in the next few minutes. To create an adaptive favicon, we will use the SVG format, and you'll see exactly why in a moment. I have my graphic editing software, Affinity, opened, and I've created a simple design for my favicon. This will be the favicon for the new CSS Weekly website. To prepare an image for an adaptive SVG favicon, you need two layers. A light icon layer and a dark icon layer. It's pretty clear which layer is for light mode and which for dark mode. This is going to be the favicon for the light mode because the background is going to be light. Something along the lines we see here. And the second layer, dark icon, is going to be visible on the dark mode. And just to give you a preview, I'm going to create a simple layer here. This is what the favicon should look like in the dark mode of the browser interface. All right. I will set both of those layers to visible, and I will export an SVG. My shortcut in Affinity is Command + Option + Shift + W. I will select SVG. The only thing that you need to pay attention to while exporting is to export both layers for your light icon and dark icon. If, for example, you didn't set both of those layers to visible, then you definitely don't want to select this option. You want to export hidden layers as well. I will export the favicon, save it as favicon. svg. Next, we need to open this favicon. svg we just exported in a text editor. Before we do, we want to optimize the favicon because the graphical editing software usually adds a bunch of stuff that is not really necessary for you to use on the web. I will open the favicon in Finder. I will use the ImageOptin app to optimize this image. So, I'll just drag and drop it here. And now that it's optimized, I'm ready to open it in the Visual Studio Code. Once it's opened, I will need to go into code view, not the preview. I think I have an extension installed that automatically previews images. In case you don't have one, you might immediately end up in the code view exactly as needed. So this is the code for our SVG favicon we just created. When we exported the favicon, we exported two layers: ligh-icon layer and dark-icon layer. Those layers match IDs in the code. So if you search for “light-icon”, you will find it in the code. And just as well, you're going to find “dark-icon” in the code as well. If you still don't see where this is going, I'm going to give you a hint. We're going to use CSS prefers-color-scheme to hide and show precisely the icons we want. I will scroll to the top and, after my opening SVG tag, I will add a style tag. This is going to be a CSS style tag. Here we're going to select light and dark icons. By default, we're going to set the light icon to “display: inline” so it's visible immediately, and the dark icon to “display: none”, so it's hidden, exactly like this. And then we're going to use media query “prefers-color-scheme: dark” to actually hide the light icon and show the dark icon when the dark mode is active. Autocomplete is already suggesting exactly this, so I'm just going to accept it, hit save, and I'm ready to test it out in the browser. By the way, there is even a simpler way to handle dark and light mode favicons without creating two layers in your graphical editing software. And I will show you exactly how in a moment. I'm going to jump to Google Chrome now. And I already have my new design for CSS Weekly opened. The favicon we've created is already in the head of this document. I will open Developer Tools to show you exactly what it looks like. I'll search for “favicon”. In the head of the document, I have favicon. svg — I also have a fallback icon, favicon. ico, and apple-touch-icon for Apple devices. By the way, those three files are everything you need in 2025 and beyond to cover all your favicon bases. So, favicon. svg is going to be the one that the browser loads. It's adaptive because we are using prefers-color-scheme media query to detect dark or light mode. So, we can test out exactly if it works. I will close Developer Tools, I will open system settings, select “Appearance” menu, and I will switch from dark mode to light mode. Appearance in my Chrome browser is set to match the device appearance, so it will immediately switch to light, and the favicon is not switched because it doesn't switch on the fly; you will actually need to reload the page. And once you do, you will see that the light favicon or the brown one is now visible, precisely as we wanted. Of course, if we switch Chrome to dark mode, reload the page again, we're gonna see our light favicon because we have created an adaptive favicon. The last thing that I want to show you is a simpler way to handle dark and light mode favicons in SVG. Essentially, we're just changing the color here, so we can use CSS in SVG to change the color immediately without creating two different layers for two different versions of the favicon. I will jump to Visual Studio Code again. In graphical software, instead of creating two different

layers, you can just create one layer, and then you can tweak the color of that layer, of that shape, for the dark mode. This means that we can delete all of this, and all of this; we're going to leave in the media query because we will use it. I will find the path where I have the color defined. This one, we have the brown color here, which means that this is our light icon. So I will set an ID here: ”favicon”. And now I can target the favicon in my CSS, and I can set “fill” to “#fff”. In the browser, when the light mode is active, the original icon — this one — will be visible. But if we switch to the dark mode, to the dark color scheme, then this code will be active because we are using “prefers-color-scheme: dark”. And this means that we can delete half of this code here and make the file even smaller, or twice as small. This is how you can create a favicon that adapts to a dark or a light color scheme. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you and a different favicon. Or rather, in the next video.