logoredraws.com

Can You Set a Website Favicon with CSS?

CSS cannot set a favicon, but CSS inside an SVG favicon can switch colors for dark mode. Here is how the pieces fit and what to prepare in your logo files.

Published

Contents
  1. The short answer
  2. How a favicon is actually declared
  3. Where CSS fits: dark mode inside an SVG favicon
  4. Other approaches and their limits
  5. What this means for your vector logo files
  6. Bottom line

The short answer

No. A stylesheet cannot assign a favicon to a page. The browser finds the icon through link elements in the HTML head, or by requesting a default favicon file when none is declared. No CSS property, selector or rule tells the browser which file to show in the tab.

CSS can still matter in one case: when the favicon itself is an SVG file. An SVG can contain its own style block, and that style block can use a prefers-color-scheme media query to change the icon's colors. This is how most dark mode favicon variants are built. The CSS lives inside the icon file, not in the site's stylesheet.

How a favicon is actually declared

The favicon is declared in HTML with link elements. A common setup pairs a raster fallback with a vector icon, plus a separate PNG for Apple home screen shortcuts:

<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 need to change the icon after the page loads, for example to show a notification badge, that takes JavaScript that edits the link element's href. CSS cannot do it.

Where CSS fits: dark mode inside an SVG favicon

In browsers that support SVG favicons, a style block inside the file can recolor the mark depending on whether the user's system or browser is set to a light or dark color scheme:

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

The root svg element in a real file also needs the standard SVG namespace attribute, which is left out of this example. The square path is a placeholder for your logo's simplified mark.

The media query responds to the color scheme preference the browser reports. That preference does not always match the actual color of the tab strip or bookmarks bar, because some browsers use their own themes. Treat the query as a good signal, not a guarantee. One way to reduce the risk is to choose colors that stay readable on both light and dark backgrounds.

Other approaches and their limits

Approach | What it does | Role in dark mode
CSS in the site stylesheet | Nothing; it cannot set or change the favicon | None
Media query inside an SVG favicon | Recolors the icon based on the reported color scheme | The main way to get a single adaptive file
media attribute on separate link elements | Points to different files for light and dark preferences | Browser handling varies, including whether the icon updates when the scheme changes
JavaScript that swaps the link href | Replaces the icon at runtime | Works, but it is scripting, not CSS
ICO or PNG fallback | A fixed raster icon | No adaptation; pick colors that work on both backgrounds

Browser support is the main gap here. Chromium-based browsers and Firefox have supported SVG favicons. Safari has historically relied on raster icons and its own conventions instead. The material behind this article includes no current version-by-version support data, so test in the browsers your audience uses before you rely on an adaptive SVG alone. Keep the raster fallback either way.

What this means for your vector logo files

  • Start from true vector artwork. An SVG file can wrap an embedded raster image, and that kind of file will not recolor through CSS fill rules. The .svg extension alone does not prove the file contains editable paths, so open it and check.
  • Simplify the mark for small sizes. A full logo with a wordmark rarely reads at tab-icon size. A reduced symbol or monogram usually works better, though that is a design judgment rather than a technical rule.
  • Use classes or shared fills on the paths you want to recolor. That way one media query can switch them together.
  • Export the raster fallbacks from the same vector source. This keeps the ICO and PNG versions consistent with the SVG.
  • Check your rights before modifying a logo. Being allowed to download a logo is not the same as being allowed to alter its artwork or colors, or to use its fonts and trademark.

Bottom line

HTML sets the favicon. CSS can only shape an SVG favicon from inside the file, mainly to switch colors for dark mode. For dependable results, build that SVG from clean vector paths, keep a raster fallback, and test the browsers that matter to your site.