Favicon Light and Dark Mode: How to Make Your Icon Adapt to Either Theme

The short answer

The most direct way to make a favicon adapt to light and dark mode is to supply it as an SVG file that contains its own CSS. Inside that CSS, a prefers-color-scheme media query changes the fill colors when the visitor's system or browser is set to a dark theme. You reference the file once in the page head, and the icon redraws itself in the matching colors without any scripting. Raster fallbacks (ICO or PNG) are still needed for browsers and platforms that do not use SVG favicons. Those fallbacks cannot change color on their own.

A few terms explain what this involves:

• Favicon: the small icon a browser shows in tabs, bookmarks, history and similar interface areas.
• SVG (Scalable Vector Graphics): a text-based vector format. It describes shapes as paths and fills instead of pixels, so it stays sharp at any size and can include CSS.
• Path: a vector outline made of points and curves. A logo's letters and marks become paths when they are converted to outlines.
• prefers-color-scheme: a CSS media feature that reports whether the user has asked for a light or dark appearance. It reflects the operating system or browser setting. It does not reflect a theme switch you build into your own website.
• Raster fallback: a pixel-based version of the icon (ICO or PNG) for environments that do not use the SVG.

Why a single-color favicon fails in one of the two themes

Browser tab strips and bookmark bars change background color with the theme. A dark logo mark that reads well on a light tab can nearly disappear on a dark one, and a light mark has the same problem in reverse. The problem gets worse at favicon size, where thin strokes and low-contrast details are the first things to vanish. An adaptive favicon fixes this by giving each theme its own contrasting color.

Step 1: Prepare the logo artwork for favicon use

Work from the original vector logo, but expect to simplify it. A full lockup with wordmark and tagline rarely works in a tab. A logomark, monogram or single initial usually does. The following are design recommendations rather than documented requirements:

• Use a square artboard and a square viewBox so the icon is not distorted or padded unevenly.
• Reduce the design to a small number of solid shapes. Remove fine detail, hairline strokes and small gaps that close up at small sizes.
• Convert any text to outlines (paths). A favicon SVG should not depend on an installed or web-loaded font, because a browser rendering the file as an image generally will not fetch external resources.
• Expand strokes to filled shapes where practical, so the shape keeps its weight at every scale.
• Give the parts that need to change color a class name, so the CSS can target them.
• Remove editor metadata, hidden layers, embedded raster images and unused definitions before export.

A file ending in .svg does not prove the file contains only vector paths. SVGs can wrap embedded bitmaps, and the extension says nothing about whether you are permitted to reuse or modify the logo. Open the file in a code editor or vector application to check its contents, and confirm usage rights separately.

Step 2: Add the light and dark styles inside the SVG

Place a style element inside the SVG. Define the light-mode colors as the default, then override them in a dark-mode media query. The example below uses a simple placeholder shape and placeholder colors. Substitute your own logo paths and brand colors.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

If the mark has more than one color, give each part its own class and set a light and a dark value for each one. Another approach is to put the mark on a solid filled background shape, such as a rounded square. The icon then carries its own contrast and may not need a dark variant. The tradeoff is that it looks like a tile rather than a free-standing mark.

Step 3: Reference the favicon and fallbacks in the page head

Link the SVG as the main icon and keep a raster fallback for environments that ignore it. The file names below are examples.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The ICO or PNG fallback shows the same image in both themes. Pick a color treatment that holds up on both light and dark backgrounds, such as a mark on a solid tile. The touch icon used for home-screen shortcuts is a separate raster image and does not respond to the SVG's media query.

Alternative: separate light and dark files

You can also supply two separate icon files and add a media attribute to each link element, for example media="(prefers-color-scheme: dark)" on the dark version. This approach also works with PNG files. Browser handling of the media attribute on icon links has been less consistent than the embedded-CSS method, so test it in every browser you care about before relying on it.

If your site has its own theme toggle

prefers-color-scheme follows the system or browser setting, not a light/dark switch on your website. To make the favicon follow your site's own toggle, use a small script that changes the href of the icon link element when the theme changes, pointing it at a light or dark file. Be aware that the tab strip itself still follows the browser theme. An icon that matches your page theme can therefore end up mismatched with the tab it sits in. Matching the system setting is often the more legible choice.

Step 4: Verify the result

• Open the SVG file directly in a browser and switch the operating system between light and dark appearance. The colors should change.
• Load the site and check the tab icon in both themes. Look specifically for marks that disappear against the tab background.
• Use browser developer tools that emulate prefers-color-scheme to test the page. Note that emulation may not update the tab icon itself, so confirm with a real system theme change as well.
• Clear the cache or use a private window between tests. Browsers cache favicons aggressively, and an old icon can make a working change look broken.
• Test in each browser you support, and confirm the ICO or PNG fallback appears where SVG favicons are not used.
• Check the icon at its smallest displayed size, not only the zoomed-in artwork.

Gaps in this guide

No confirmed source material was available for this guide. It gives no browser version numbers, support tables or exact recommended pixel sizes. Support for SVG favicons and for the media attribute on icon links differs between browsers and changes over time. Check current browser documentation and test directly before you rely on either method in production.