How to Design and Implement Dark Mode Favicons

The short answer

A dark mode favicon is a site icon that stays legible when the browser displays it on a dark tab or toolbar. The most widely used technique is a single SVG favicon with an embedded CSS media query. SVG (Scalable Vector Graphics) is a text-based vector format that describes shapes as paths rather than pixels. The media query, prefers-color-scheme, tells the icon whether the viewer's environment is set to a light or dark appearance, so the icon can swap its fill colors. You then add raster fallbacks, either PNG or ICO files, for browsers and platforms that do not use SVG favicons. Raster formats cannot change color on their own.

If you do not need the icon to switch, a contained design is a simpler option. Place the mark on a solid background shape, such as a filled square, rounded square or circle, so it carries its own contrast and reads on any tab color. Many teams use this contained version for the raster fallbacks even when the SVG adapts.

What actually changes in dark mode

The favicon file does not change by itself. The browser draws the tab or address bar in light or dark colors, and the icon sits on top. A dark mark on a transparent background can disappear against a dark tab, and a light mark can disappear against a light one. An SVG with a prefers-color-scheme rule responds to the color scheme the browser reports to it. The browser's own theme setting can differ from the operating system setting, so test both.

Choose an approach

Approach | How it works | Strengths | Limitations

Adaptive SVG | One SVG file with a style block that changes fills under prefers-color-scheme: dark | One file, crisp at any size, switches automatically | Only works where the browser supports SVG favicons; raster fallbacks still needed

Separate files with link media attributes | Two icon link tags, each with a media condition for light or dark | Works with PNG files as well as SVG | Support for the media attribute on icon links varies by browser; test before relying on it

Contained mark | The mark sits on an opaque background shape in every file | No switching logic; predictable everywhere | Adds a visible tile around the logo; may not match the brand's preferred presentation

Before you start

• A vector master of the logo or its symbol, not a screenshot or traced low-resolution image.
• Confirmation that you have permission to adapt and publish the logo. A file extension does not prove reuse rights.
• Confirmation that the source file is genuinely vector. An SVG, EPS, AI or PDF file can contain embedded bitmap images. Open SVGs in a text editor and look for image elements or long base64 strings.
• Approved brand colors, plus any approved alternate colors for dark backgrounds.
• Access to the site's HTML head, or to the template or CMS setting that controls it.

Step 1: Reduce the logo to a favicon-ready mark

Favicons usually render very small in browser tabs, so a full horizontal logo with a wordmark rarely survives. Start from the symbol, a monogram or a single distinctive letterform. Then simplify the path geometry, which means the anchor points, curves and shapes that make up the vector outlines.

• Work on a square artboard. A square viewBox, the coordinate area an SVG declares, prevents the browser from stretching or letterboxing the icon.
• Remove fine details, thin hairlines, small counters and taglines that will merge or vanish at small sizes. A counter is the enclosed or partly enclosed space inside letters such as o, e or a.
• Convert any live text to outlines so the icon does not depend on installed fonts. Keep an editable copy with live type separately.
• Expand strokes into filled shapes. Filled paths behave more predictably than stroked paths when the icon is scaled and recolored.
• Merge overlapping shapes that share a color, and delete hidden or empty layers.
• Align key horizontal and vertical edges to whole units of the artboard grid. This is a design recommendation: it helps edges stay sharp when the icon is rasterized at small sizes.
• Give every element that needs to change color in dark mode a shared class name or group so one style rule can target it.

Step 2: Pick colors for each theme

Choose one fill set for light environments and another for dark environments. Often you only need to switch the darkest brand color to a light or tinted version and leave accent colors unchanged. Check each version against both a light and a dark background at actual tab size, not only zoomed in. If a brand color has weak contrast on both backgrounds, consider giving the mark a contained background shape. Record the approved light and dark values so developers and other designers use the same ones.

Step 3: Build the adaptive SVG

Export the simplified mark as SVG, then open it in a text editor and add a style block. The example below uses placeholder colors and a placeholder square path. Replace them with your own artwork and approved colors. Keep the SVG namespace attribute your editor writes on the svg element: a standalone SVG file needs it to render. It is shown here as a placeholder.

<svg xmlns="[SVG namespace written by your editor]" 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>

• The default rule applies in light environments, and the media query overrides it in dark ones.
• Do not depend on currentColor to inherit color from the page. A favicon is rendered separately from the page's styles.
• If you run the file through an SVG optimizer, check afterward that the style block and media query are still present. Some optimization settings move styles inline or remove them, which breaks the switch.
• Remove editor metadata, comments and unused definitions to keep the file small. Do not remove the viewBox.

Step 4: Export raster fallbacks

Some browsers and platforms ignore SVG favicons. Others use their own icon types, such as the touch icon shown on Apple home screens or the icons declared in a web app manifest. These files are raster images and cannot switch themes. For each one, use either the contained version of the mark or the color set that holds up best on both backgrounds. Commonly used outputs include a multi-size ICO for legacy tab display, an Apple touch icon PNG and the PNG sizes your web app manifest declares. Check the current required sizes in each platform's documentation before exporting rather than relying on a fixed list. Export from the vector master at each target size. Do not scale a single small PNG up.

Step 5: Add the icons to the page

Place the link tags in the HTML head. A common pattern lists the ICO with sizes set to any and the SVG with its MIME type. The MIME type is a label that tells the browser what kind of file it is, here image/svg+xml. With this pattern, browsers that support SVG favicons use the adaptive file and others fall back to the ICO. Adjust the file names and paths to match your site.

<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">

If you use separate files instead of an adaptive SVG, give each icon link a media condition. Name the files by the scheme they serve, not by the color of the artwork. The file shown in dark mode usually contains a light-colored mark, and color-based names confuse the two. Because browser support for this attribute varies, keep a neutral fallback in place.

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

Step 6: Confirm the result

• Open the SVG file directly in a browser and confirm it renders without errors or clipping.
• Switch the operating system appearance between light and dark and check the browser tab each time. Then repeat with the browser's own theme setting, since the two can differ.
• Browsers cache favicons aggressively. If the icon does not update, try a private window, clear the site's cached data, or temporarily rename the file and update the link.
• Developer-tool color-scheme emulation may change the page without changing the tab icon. Confirm the final behavior with a real theme switch.
• Look at the icon at actual tab size, not zoomed in, on both backgrounds. Confirm the mark is recognizable and no detail has filled in.
• Test in each browser you support, including at least one that does not use SVG favicons, to confirm the fallback appears and is legible.
• Add the site to a phone home screen if relevant, and check the touch icon on both light and dark wallpapers.
• Open the final SVG in a text editor and confirm it contains no embedded bitmaps, no live text and an intact style block.

Common problems and fixes

Symptom | Likely cause | Fix

Icon never changes color | Style block removed by an optimizer, or the browser is using a raster fallback | Re-check the SVG source; confirm which file the browser loaded

Icon disappears in one theme | Transparent background with a single fill color | Add a dark-scheme fill rule or a contained background shape

Old icon keeps appearing | Favicon cache | Test in a private window or change the file name

Blurry or muddy edges | Fine detail, thin strokes or edges off the grid | Simplify the mark, expand strokes and align edges to whole units

Wrong file chosen when both ICO and SVG are listed | Browser preferring the ICO | Use the sizes any pattern on the ICO and verify in each target browser

Gaps to verify for your setup

The supplied material did not include confirmed browser support tables, required icon sizes or application-specific menu commands, so this guide does not state them. Before publishing, check current documentation for SVG favicon support and media-attribute support in each browser you target. Check the current touch-icon and manifest icon requirements for each platform. Also check the outline-text, expand-stroke and SVG export options in the version of your vector editor, since command names and defaults change between releases.