Change favicon based on dark mode

To change a favicon based on dark mode, you can use one of three methods. The most self-contained is a single SVG favicon that contains its own prefers-color-scheme media query and recolors itself. You can also declare separate light and dark icon files in HTML using the media attribute. As a third option, a small script can swap the icon when the color scheme changes. Your choice depends on browser support, whether you need a raster fallback, and how different the two logo variants have to be.

What is being changed, and what is not

A favicon is the small mark shown in browser tabs, bookmarks and history lists. The dark mode problem is visual. When the tab strip turns dark, a dark or thin-stroked mark can lose contrast or disappear. The fix is a second color treatment of the same mark, not a new logo. These methods apply to the browser favicon only. Home-screen and app icons, such as the touch icon or the icons in a web app manifest, are separate assets and are not switched by the techniques below.

The three methods compared

Method | How it works | Main strength | Main limitation

SVG with embedded media query | One SVG file recolors itself using CSS inside the file | One file, no script, follows the theme automatically | Requires browser support for SVG favicons; needs a raster fallback for others

Separate files with the media attribute | Two link tags, each limited to light or dark scheme | Works with PNG or ICO artwork, so variants can differ freely | Browsers do not handle the media attribute on icon links consistently

Script swap | JavaScript checks the color scheme and replaces the icon reference | Reacts to live theme changes and works with any file format | Depends on JavaScript, runs after page load, and can be affected by favicon caching

Method 1: an SVG favicon that adapts itself

Put a style block inside the SVG and add a prefers-color-scheme rule that changes the fill of the mark. The colors below are placeholders, so substitute your own brand values. A standalone SVG file also needs the standard SVG namespace declaration on its root element, which is omitted here.

<svg viewBox="0 0 32 32">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <path class="mark" d="..." />
</svg>

The query responds to the color scheme the browser reports. That setting may follow the operating system or a browser-level preference. It may not match the actual tab color if a user has applied a custom browser theme. Some browsers do not support SVG favicons, so keep a raster file as a fallback.

Method 2: separate light and dark files

Use this method when the dark variant needs different artwork, or when you only have raster versions of the logo.

<link rel="icon" href="favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="favicon-dark.png" media="(prefers-color-scheme: dark)">

Some browsers ignore the media attribute on icon links and show only one of the files. Test this in the browsers your audience uses before relying on it alone.

Method 3: swapping the icon with a script

const icon = document.querySelector('link[rel="icon"]');
const query = window.matchMedia('(prefers-color-scheme: dark)');

function updateIcon() {
  icon.href = query.matches ? 'favicon-dark.png' : 'favicon-light.png';
}

updateIcon();
query.addEventListener('change', updateIcon);

The script updates the icon when the user switches themes during a session. It does nothing when JavaScript is disabled, and the default icon shows briefly until the script runs. Browsers also cache favicons aggressively, so a changed file may not appear right away during testing.

A combined setup with a fallback

A common arrangement pairs an adaptive SVG with a static ICO or PNG. Browsers that support SVG favicons get the theme-aware version, and the others get a version that stays legible.

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

Design decisions for the dark variant

• Keep the silhouette identical in both versions and change only color, so the mark stays recognizable.
• Check contrast against both a light and a dark tab background, not just against white.
• Decide whether to invert the colors or shift the brand color. A saturated brand color may work on both backgrounds, while near-black usually does not.
• Consider placing the mark on a solid tile or rounded square. A contained shape can stay legible in both themes and may remove the need for a variant.
• Thicken hairline strokes and small counters. Details that hold up at large sizes can vanish at favicon scale, especially as light-on-dark.
• Preview at actual tab size, because a variant that looks right at full size can fail when reduced.

Whether a dark variant is needed at all is a judgment call. A mark that already has strong contrast, or that sits inside its own background shape, may work without one.

Checks before you edit the logo file

A file ending in .svg is not necessarily clean vector artwork. Some SVG files simply wrap an embedded bitmap, which cannot be recolored with CSS. Open the file and inspect its paths before planning a color-switching favicon around it. Being able to download a logo also does not mean you have permission to modify or reuse it. Confirm usage rights for any mark you do not own.

Gaps in this guide

No browser support figures or version data were available for this guide. Statements about inconsistent support are general cautions, not measurements. Check current compatibility tables and test in your target browsers before choosing a method.

Which method to choose

• If you have a clean vector mark and only need a color change, use an adaptive SVG favicon with an ICO or PNG fallback.
• If the dark version needs different artwork, or you only have raster files, use separate files with the media attribute and test browser behavior.
• If the icon must follow theme changes made during a session, add the script swap on top of one of the other methods.
• If the mark is legible on both backgrounds, a single static favicon may be enough.