SVG Favicon Styles: CSS, the style Attribute and the style Element

The short answer

An SVG favicon can be styled in three ways inside the file itself: with presentation attributes such as fill or stroke, with an inline style attribute on individual elements, or with a style element that holds CSS rules for the whole document. When a browser loads an SVG as a favicon, it treats it as a self-contained image. CSS from the host web page does not reach into the icon, and external stylesheets referenced from inside the SVG are generally not loaded. For a favicon, the dependable choices are presentation attributes, inline style attributes and an embedded style element. The style element is the only one of these that can hold media queries, such as a light and dark color switch.

What each styling method is

Presentation attributes are SVG attributes that set a visual property directly on an element, for example fill="#1a1a1a" on a path. They are the most widely understood form of SVG styling. Most vector editors, renderers and conversion tools read them reliably.

The style attribute holds CSS declarations written directly on one element, for example style="fill:#1a1a1a". It uses CSS syntax, but it applies only to the element that carries it.

The style element, sometimes called the style tag, is a block of CSS placed inside the SVG, usually near the top of the file. Its rules target elements by selector, such as a class or an element name. This makes it the natural home for shared colors, reusable classes and media queries.

An external stylesheet is CSS kept in a separate file and linked from the SVG, for example through an xml-stylesheet processing instruction or an @import rule. This approach can work when the SVG is opened directly as a document. It is not a dependable option for a favicon.

How the methods rank against each other

When the same property is set in more than one way, standard CSS precedence decides which value wins. Presentation attributes have the lowest priority, so any matching CSS rule overrides them, even a rule with very low specificity. A rule in a style element beats a presentation attribute. A declaration in an inline style attribute beats an ordinary rule in a style element. A declaration marked !important in a style element can override an inline style attribute. Knowing this order explains most cases where a color in a logo file seems to ignore an edit.

Method | Where it lives | Relative priority | Supports media queries | Dependable in an SVG favicon

Presentation attribute | On each element, e.g. fill | Lowest; overridden by any matching CSS | No | Yes

style attribute | On each element, as CSS declarations | Above style element rules unless those use !important | No | Yes

style element | Inside the SVG file, as CSS rules | Standard selector specificity | Yes | Yes, subject to browser support for SVG favicons

External stylesheet | Separate file linked from the SVG | Standard selector specificity | Yes | No; generally not loaded when the SVG is used as an image

Why favicons behave differently from inline SVG

An SVG pasted directly into an HTML page is part of that page. It can be styled by the page's stylesheet, and it can inherit values such as currentColor from surrounding text. A favicon is different. It is referenced as an image, and browsers render image-mode SVG in a restricted way. Scripts do not run, external resources are generally blocked, and the page's CSS has no access to the icon's internals. As a result, currentColor in a favicon does not pick up the page's text color, and page-level CSS cannot recolor the icon. Every style the icon needs must be written inside the SVG file.

The main practical advantage of the style element in a favicon is the prefers-color-scheme media query. With it, one SVG file can switch colors between light and dark browser or system themes. How consistently browsers honor this inside favicons, and how often they re-evaluate it after a theme change, varies. No browser-specific testing data was supplied for this article, so check the behavior in the browsers your audience uses.

<svg 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 snippet above omits the namespace declaration only to keep it short. A standalone SVG file used as a favicon needs the standard SVG namespace declared on its root svg element. Without it, browsers may not render the file as SVG.

Choosing a styling method for a logo-based favicon

• Use presentation attributes when the icon has fixed colors and must work across the widest range of editors, optimizers and conversion tools.
• Use a style element when the icon needs a dark-mode variant, or when several shapes share colors that should be controlled from one place.
• Use inline style attributes sparingly. They work, but they scatter values across the file and override style element rules, which makes later edits harder.
• Avoid external stylesheets, web fonts and linked resources in a favicon, because they are generally not loaded when the SVG is used as an image.
• Convert text to outlined paths in the favicon version of a logo, since a font referenced by the file may not be available when the icon renders.

Editing and delivery caveats for vector logo files

Vector editors and SVG optimizers do not all handle styling the same way. Some editors let you choose at export between presentation attributes, inline style attributes and internal CSS. Some optimizers rewrite one form into another, merge classes or remove a style element entirely. After any export or optimization pass, open the resulting file and confirm that the colors and any media queries survived.

Class names inside a style element can also collide when several SVGs are later inlined into the same HTML page, because their rules then share one document. This does not affect a favicon referenced as an image. It does matter if the same logo file is reused inline elsewhere, so use distinctive class names in delivered logo files.

CSS can restyle only vector elements such as paths, shapes and outlined text. If an SVG wraps an embedded raster image, CSS cannot change that image's internal colors. A file can carry the .svg extension and still contain little or no editable vector artwork, so inspect the file's contents before planning style changes.

Fallbacks and remaining gaps

Support for SVG favicons is not universal across all browsers and platforms. A common practice is to provide a raster or ICO favicon alongside the SVG version so that environments without SVG support still show an icon.

This article relies on general, documented SVG and CSS behavior. No specific browser version data, support figures or test results were supplied. Before you depend on dark-mode switching or any advanced CSS inside a favicon, verify current support in the browsers you need to serve.