White SVG Favicon: How to Set and Control Its Color

The short answer

A white SVG favicon is a vector icon whose shapes are filled with white. That suits dark browser tabs but can disappear on light ones. Browsers render the favicon as an isolated image, so the page's CSS cannot recolor it. The color has to be set inside the SVG file itself. You can hard-code a fill, or you can add a prefers-color-scheme media query inside the SVG so the icon switches between a dark and a white version. You should also keep a raster fallback for browsers that do not use SVG favicons.

What is being discussed

The subject is a favicon delivered as an SVG file and linked from a page's head, rather than a traditional ICO or PNG favicon. "White" here means the visible artwork uses a white fill or stroke, often a reversed or knockout version of a logo. The question is how to make sure that color reads clearly wherever the browser shows the icon.

Why a white favicon can vanish

Tab bars, bookmark lists and address bars change with the browser theme and the operating system's light or dark mode. A white mark on a transparent background has nothing behind it to contrast against when the surrounding interface is also light. The file is not broken. It is simply white on white.

• Common reasons a white SVG favicon looks wrong:
• The artwork is pure white with a transparent background and no dark mode handling.
• The fill is set to currentColor and the designer expected it to inherit the page's text color. A favicon does not inherit page styles, so the result may not match what was intended.
• The SVG contains an embedded raster image instead of vector shapes, so changing fill values has no effect on it.
• The browser ignores the SVG and shows an older ICO or PNG fallback, which may be a different color.

Setting the color inside the SVG

The most predictable approach is to set the fill explicitly on the paths, or in a style block inside the SVG, and then override it for dark mode. Browsers that apply the prefers-color-scheme media query inside SVG favicons will switch colors automatically. Browsers that ignore the query will use the default color, so choose a default that works on light interfaces.

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

In this pattern the icon is dark by default and turns white only when the user's system is in dark mode. Reversing it, with white as the default, is the setup most likely to disappear on light tabs. The path shown is a placeholder square. Replace it with the logo's actual vector shapes.

Another option is to make the icon readable in both modes without a media query. You can place the white mark on a solid, colored background shape inside the SVG, or add a thin contrasting outline. This trades the transparent look for consistent visibility.

Linking the SVG with a fallback

Support for SVG favicons and for media queries inside them differs between browsers and has changed over time. No compatibility data was supplied for this article, so check current browser documentation before relying on SVG alone. Declaring a raster fallback alongside the SVG is a widely used safeguard.

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

Raster fallbacks cannot switch color on their own. Give the ICO or PNG version a color, or a background, that stays readable on both light and dark interfaces. Do not export the white-only version.

Check that the file is really vector

The .svg extension does not guarantee editable vector paths. An SVG can wrap a PNG or JPEG inside an image element, and in that case fill and media query rules will not recolor the artwork. Open the file in a text editor or a vector application. Path, circle, rect or polygon elements mean the shapes can be recolored. An image element with embedded data or an external reference means the artwork is raster and needs to be redrawn or traced before its color can be controlled.

What you find in the file | What it means for color control

Path, rect, circle or polygon elements with fill values | Vector artwork; color can be set or switched in the SVG

Fill set to currentColor | Vector, but the result in a favicon context may not follow page styles; set explicit colors instead

An image element containing embedded raster data | Raster artwork inside an SVG wrapper; fill changes will not affect it

Text elements relying on a font | Rendering depends on font availability; converting text to outlines is the usual fix for icons

Permission to recolor a logo

Being able to download a logo file does not mean you are permitted to modify it. If the favicon is based on someone else's brand, changing its color, adding backgrounds or outlining fonts may be governed by brand guidelines, font licenses and trademark rules. For your own brand, follow your internal guidelines on approved reversed and single-color versions.

Gaps in the available evidence

No specific browser support tables, version numbers or test results were provided. This article therefore describes general techniques rather than verified compatibility for particular browsers. Before shipping, preview the favicon in the browsers and color modes your audience uses.