SVG Style Color: How Fill, CSS Variables and Favicon Color Control Work

The short answer

The color of SVG artwork comes from the fill and stroke properties of its shapes. You can set those properties in four places: presentation attributes such as fill="#1a73e8", an inline style attribute such as style="fill:#1a73e8", a style element inside the SVG, or an external stylesheet. CSS variables (custom properties) and the currentColor keyword work as values for fill and stroke. The important limit is reach. Page CSS can recolor an SVG only when the SVG markup is placed inline in the HTML document. An SVG loaded as a favicon, through an img element or as a CSS background is a separate document. Your page's styles and variables do not reach it. For an SVG favicon, every color decision, including dark-mode switching, has to live inside the SVG file.

Where SVG color can be set, and which value wins

Presentation attributes have the lowest priority in the cascade. Any CSS rule that targets the element overrides them, even a rule with low specificity. A rule in a style element or stylesheet follows normal CSS specificity. An inline style attribute overrides stylesheet rules unless those rules use !important. This order affects logos exported from design tools. Some exporters write colors as attributes, some as inline styles and some as classes in an embedded style block. The export method decides how easy the colors are to override later.

Method | Example | Overridden by

Presentation attribute | fill="#1a73e8" | Any matching CSS rule

Style element or stylesheet rule | .mark { fill: #1a73e8; } | More specific rules, inline style, !important

Inline style attribute | style="fill:#1a73e8" | Only !important rules

Inherited value | fill set on a parent group | Any value set directly on the child

Using currentColor and CSS variables

The currentColor keyword makes fill or stroke follow the element's CSS color property. In inline SVG, an icon set to fill="currentColor" picks up the surrounding text color with no extra rules. CSS custom properties are more flexible. You can name several brand colors and give each a fallback, so the artwork still renders correctly when the variable is not defined.

<!-- Inline SVG in an HTML page: page CSS can reach it -->
<style>
  .logo { --logo-primary: #1a73e8; --logo-accent: #fbbc04; color: #202124; }
  .dark .logo { --logo-primary: #8ab4f8; color: #e8eaed; }
</style>

<svg class="logo" viewBox="0 0 32 32" aria-hidden="true">
  <path class="mark" d="M4 4h24v24H4z" fill="var(--logo-primary, #1a73e8)"/>
  <circle cx="16" cy="16" r="6" fill="var(--logo-accent, #fbbc04)"/>
  <path d="M10 26h12" stroke="currentColor" stroke-width="2"/>
</svg>

Custom properties inherit into content referenced with a use element. This makes them a common way to recolor one shared icon symbol in different places. Properties set directly inside the referenced symbol still take priority, so leave the color values in the symbol as variables rather than fixed hex codes.

Why page CSS cannot recolor an SVG favicon

A favicon is loaded as an image. Browsers render it in isolation: page stylesheets, page-level CSS variables and scripts do not apply to it. Writing fill="var(--brand)" in a favicon only works if --brand is defined inside the same SVG file. currentColor resolves against the SVG's own color property, not the page's text color. To change a favicon's color at runtime, you have to swap the icon itself. One way is to point the link element's href at a different file. Another is to generate a new SVG and assign it as a data URI. Both approaches require JavaScript on the page.

Switching favicon colors for light and dark themes

A style element inside the favicon SVG can include a prefers-color-scheme media query. This lets the icon change color based on the user's color-scheme preference. The query reads the preference available to the image document. It does not read your site's own theme toggle, and it does not guarantee a match with the actual color of the browser's tab strip. Treat it as a way to improve contrast, not as precise theme syncing.

<!-- favicon.svg: a standalone file also needs the standard SVG namespace (xmlns) on the root element -->
<svg viewBox="0 0 32 32">
  <style>
    :root { --icon-fg: #1a73e8; }
    @media (prefers-color-scheme: dark) {
      :root { --icon-fg: #8ab4f8; }
    }
    .mark { fill: var(--icon-fg); }
  </style>
  <path class="mark" d="M4 4h24v24H4z"/>
</svg>

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

Browser support for SVG favicons, and for media queries inside them, differs between browsers and has changed over time. Safari in particular has historically had limited support for SVG tab icons. Keep a raster fallback such as an ICO or PNG file, and test the browsers your audience uses. The supplied material includes no confirmed version-by-version support data, so check current compatibility tables before relying on the dark-mode switch.

Check that the artwork can actually be recolored

A .svg extension does not prove the file contains editable vector paths. Open the markup before planning color changes, and look for the following:

• Embedded raster images: an image element, often holding a base64-encoded PNG or JPEG, ignores fill and stroke. That part of the logo cannot be recolored with CSS.
• Live text: text elements depend on fonts that may not be available when the SVG renders as a favicon or image. Convert lettering to outlined paths for predictable results.
• Hard-coded colors in inline styles: these override stylesheet rules and may need editing or replacing with classes or variables.
• Gradients, patterns and filters: their colors are defined in separate elements such as stop elements. Restyle those elements, not the shape that uses them.
• Detail at small sizes: favicons display at very small pixel sizes. Fine strokes and subtle color differences can disappear, so a simplified mark often works better than the full logo.

Permission to recolor a logo

Being able to download a logo file does not give you the right to change it. Recoloring someone else's logo, or using it as a favicon, may be restricted by brand guidelines, trademark rights, or the license for any fonts in the artwork. For your own brand, approved color values from a style guide are the natural source for the variables in your SVG. For any other brand, confirm what modifications are permitted before you change its colors.

What the available evidence does not cover

No subject-specific evidence was supplied for this topic. That means no browser version numbers, test results or measurements. The guidance here relies on general CSS and SVG behavior. Before publishing a color-switching favicon, check exact browser support, how tab icons react to OS theme changes, and how particular design tools export colors.