Adapt a Favicon to Dark and Light Mode

A favicon sits on a background you do not control. The same small mark appears on a light tab strip for one visitor and a near-black one for another, so a dark logo can disappear in dark mode and a white logo can vanish in light mode. There are two practical ways to handle this. You can design one icon that reads well on both backgrounds, or you can ship an SVG favicon that switches its own colors based on the visitor's color-scheme preference. This guide explains both approaches, what each requires from your vector artwork, and where the limitations are.

The short answer

The most direct way to adapt a favicon to dark and light mode is an SVG favicon with an embedded CSS media query for prefers-color-scheme. Inside the SVG, you set the default fills for light mode and override them when the browser reports a dark preference. You then reference the SVG from the page head and keep a raster favicon as a fallback for browsers that do not use SVG icons. If you cannot rely on that switching, or you want consistent results everywhere, design a single icon with built-in contrast, such as a solid background shape or an outline, so it stays legible on any tab color.

What is being adapted: the favicon artwork, not the page

This is about the small icon browsers show in tabs, bookmarks, history and similar places, usually derived from a logo symbol or monogram rather than the full logo lockup. Dark mode support here means the icon itself changes appearance, or is designed so it does not need to. It is separate from your site's own dark theme. A site can have a full dark theme while its favicon stays static, and the reverse is also possible.

Option 1: An SVG favicon that switches colors

SVG files can contain a style element, and that CSS can include media queries. When a browser renders an SVG favicon, a prefers-color-scheme query inside the file can change fills and strokes for dark mode. The structure looks like this:

<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="..." />
</svg>

The colors and path above are placeholders. Use your own brand values and the actual path data from your icon. The xmlns value is the standard SVG namespace identifier that the format requires. It is not a link.

In the page head, declare the SVG and keep a fallback:

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

Browsers that support SVG favicons use the SVG. Others fall back to the ICO or PNG version, which cannot switch colors. Treat the fallback as a static icon and choose its colors so it reads acceptably on both light and dark backgrounds.

What the SVG approach requires from your artwork

• Real vector shapes. Color switching works by changing fill and stroke on paths and shapes. If the SVG only wraps an embedded raster image, such as a PNG inside an image element, CSS cannot recolor it, and the dark-mode rule will have no visible effect.
• Addressable elements. Shapes that need to change color should carry a class or be otherwise targetable. Exports from design tools often use inline fill attributes, which you may need to convert or override.
• A simplified mark. Favicons display very small, so detailed logos usually need a reduced symbol. Thin strokes and fine details that work at large sizes can blur into nothing.
• Clean exports. Remove editor metadata, unused definitions and hidden layers so the file is small and predictable.

Do not assume an SVG contains editable vector paths because of its file extension or name. Open the file in a code editor or vector application and confirm that the icon is built from path or shape elements rather than an embedded bitmap.

Option 2: One icon designed for both backgrounds

If you want predictable results in every browser, including those that ignore SVG favicons, design an icon that does not depend on the tab color. Common techniques:

• Background plate: place the mark on a solid rounded square or circle in a brand color, so the icon provides its own contrast.
• Outline or keyline: add a light stroke around a dark mark, or the reverse, so the edge stays visible on either background.
• Mid-tone brand color: a saturated color with enough contrast against both near-white and near-black can work without any switching. Check it against both backgrounds before committing.
• Two-tone mark: combine a light and a dark element so at least part of the icon always stands out.

This approach is simpler to maintain and behaves the same in all browsers. The trade-off is that the icon may look heavier than a bare logo mark.

How the two approaches compare

Aspect | SVG with color-scheme query | Single contrast-safe icon

Adapts to theme | Yes, where the browser supports SVG favicons and the query | No, designed to work on both

Browser consistency | Varies; fallback icon is static | Same everywhere

Artwork requirement | Vector paths that CSS can recolor | Any format; vector source still recommended

Maintenance | Two color sets plus a fallback | One design

Visual result | Closest to the bare logo mark | Often adds a plate or outline

Caveats worth knowing

• Browser support varies. SVG favicon support has differed between browsers, and Safari in particular has historically handled favicons differently. Check current compatibility data rather than assuming universal support.
• The preference may not match the tab color. The media query reflects the color scheme the browser reports, which usually follows the operating system or browser setting. A custom browser theme can still produce a tab background that does not match the reported preference.
• Switching may not update immediately. Browsers cache favicons heavily, so changes to the file or to the system theme may not appear until the cache refreshes or the page is reloaded.
• Other platform icons are separate. Home-screen icons and app manifest icons are typically raster files with their own requirements. They do not inherit the SVG's dark-mode behavior.
• An alternative technique is less reliable. Some guides suggest separate link elements with a media attribute for light and dark preferences. Browser support for media on icon links has been inconsistent, so an embedded query in a single SVG is generally the more dependable route.

Rights and brand considerations

Recoloring a logo for dark mode changes the artwork. If you are working with your own organization's logo, check the brand guidelines for approved reversed or dark-background versions; many brands define one. If the logo belongs to someone else, being able to download a file does not grant permission to modify it, alter its colors, or use its fonts and trademarks. That requires separate authorization from the owner.

A practical checklist

• Start from a vector source of the logo symbol, not a raster export.
• Simplify the mark until it reads at very small sizes.
• Decide whether to switch colors with an SVG media query or to design one contrast-safe icon.
• If switching, confirm the SVG uses real paths and set light defaults with dark overrides.
• Export a static ICO or PNG fallback with colors that work on both backgrounds.
• Declare both in the page head, with the SVG typed as image/svg+xml.
• Test in light and dark settings across the browsers your audience uses, clearing the favicon cache between checks.
• Confirm that any recoloring follows brand guidelines or has the owner's permission.

What this guide does not cover

No subject-specific evidence was supplied for this article, so it gives no browser version numbers, support percentages, or measured contrast values. Verify current browser behavior against up-to-date compatibility references, and test with your own icon, because results depend on the specific artwork and color choices.