Favicon Dark and Light Mode: How to Make One Icon Work on Both Themes

The short answer

A favicon can respond to dark and light themes in two main ways. You can use a single SVG favicon with an internal CSS media query for prefers-color-scheme, which swaps fill colors based on the user's color preference. Or you can design one mark that stays legible on both light and dark browser chrome, so it doesn't need to switch at all. Many sites combine the two: an adaptive SVG for browsers that support it, plus a static PNG or ICO fallback built to read well on either background.

The subject here is the small brand symbol shown in browser tabs, bookmarks and history lists. It is not the full logo lockup. This symbol is usually derived from vector logo artwork, so the quality and structure of that source file determine how easily you can produce a theme-aware version.

Why dark mode breaks many favicons

Favicons appear on surfaces you don't control. A dark navy or black mark that looks crisp on a light tab bar can nearly disappear on a dark one. A white or very pale mark has the opposite problem. Thin strokes and low-contrast color pairs fail first, because at favicon sizes there is very little area to carry the shape.

Option 1: An adaptive SVG favicon

An SVG file can include a style block. Inside it, a prefers-color-scheme media query can change the fill of the paths. The shape stays the same and only the colors change. The snippet below shows the relevant inner portion of such a file. The svg root element also needs its standard namespace declaration and a viewBox, which are omitted here.

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

In the page head, you reference the SVG as an icon and keep a raster fallback for browsers that don't use SVG favicons:

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

Browser support for SVG favicons, and for media queries evaluated inside them, has varied across browsers and versions. This article doesn't include confirmed, current compatibility data, so check present support for your target browsers before you rely on the adaptive version alone.

There is a second subtlety. The media query reflects the user's color-scheme preference, but the tab bar's actual color depends on the browser's own theme. These usually match, but not always. That mismatch is one reason a mark that works on both backgrounds is still worth designing.

Option 2: Separate files selected by a media attribute

Another approach is to declare two icon links, each with a media attribute targeting light or dark preference. The idea is simple, but browsers have handled the media attribute on icon links inconsistently. Some may ignore it or fail to switch until the page reloads. Treat this approach as something to test, not a guaranteed mechanism.

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

Option 3: One symbol that survives both themes

Choosing the right symbol is often the most dependable fix, because it doesn't depend on any browser feature. Common design strategies include:

• Place the mark inside a solid container shape, such as a rounded square or circle, so the icon carries its own background on any tab color.
• Add a thin contrasting outline or keyline around a dark or light mark so its edge stays visible.
• Pick mid-tone or saturated brand colors that contrast with both near-white and near-black surfaces.
• Simplify to the most recognizable element of the logo, such as a monogram or icon, rather than shrinking the full wordmark.
• Avoid hairline strokes and fine counters that fill in or vanish at small sizes.

Comparing the approaches

Approach | How it adapts | Main caveat

Adaptive SVG with internal media query | Swaps colors inside one vector file | Depends on SVG favicon and media query support in each browser

Separate files with media attribute | Browser picks a file by color preference | Handling of the media attribute on icon links is inconsistent

Theme-neutral symbol with container or outline | Doesn't adapt; designed to read on both | Less flexibility in exact colors per theme

Raster fallback (ICO or PNG) | Static | Should itself be theme-neutral, since it can't switch

Icons that won't follow the theme

Platform icons such as the Apple touch icon and web app manifest icons are typically static raster images. They don't respond to an SVG's internal media query. Design them with their own solid background, rather than relying on transparency, so they display predictably wherever they appear.

What to check in your vector source file

An adaptive SVG favicon only works if the artwork is made of real vector shapes whose fills CSS can target. A file with an .svg, .ai or .eps extension can still contain an embedded raster image, and CSS can't recolor the inside of that bitmap. A file name or extension alone doesn't confirm editable paths. Open the file in a vector editor and verify that the mark consists of paths. Also check for text that still depends on a font rather than being outlined, and remove unnecessary groups, masks and metadata that bloat a file meant to be tiny.

Keep the distinction between source and preview clear. A PNG preview of a logo is useful for checking appearance, but it isn't a substitute for the vector master when you need to produce color variants.

Permission to adapt the logo

Being able to download a logo file doesn't grant the right to change it. Creating a dark-mode variant means recoloring or restructuring artwork, and possibly altering how a typeface or trademark is presented. For your own brand, follow your brand guidelines. If they define approved reversed or monochrome versions, start from those. For a client's or third party's logo, confirm that modification is permitted before producing new color variants.

Gaps in this overview

No confirmed evidence was available for this article on current browser version support, specific recommended pixel sizes, or test results. The guidance above describes general mechanisms and design principles. Verify behavior in the browsers and operating systems your audience actually uses, in both light and dark settings, before finalizing your favicon set.