SVG Favicon in 2026: Support, Dark Mode and Fallbacks

Yes, an SVG works as a favicon in every current major browser: Chrome and Edge from version 80, Firefox from 41 and Safari from 26.0, which together reach about 91.6% of web users. Don’t ship it alone, though. Google Search’s favicon guidelines don’t list SVG as a supported format, and in AI Icon Creator’s test Chrome 154 showed the .ico instead of the SVG unless the .ico link said sizes="32x32".

This guide covers which browsers support SVG favicons, which files to ship beside one, the markup to copy, how to make it follow dark mode, how to keep it readable at 16 px and why an SVG favicon might not show.

Can you use an SVG as a favicon?

You can use an SVG as a favicon in Chrome, Edge, Firefox, Opera, Samsung Internet and, since version 26, Safari. Older tutorials that say Safari can’t are out of date: WebKit’s Safari 26 announcement says Safari now supports the SVG file format for icons everywhere there are icons in the interface, including favicons. In our test, Safari 26.5 on macOS requested the SVG from a page that listed only an SVG, and requested every file when we listed an .ico or a PNG as well. We couldn’t read which one it showed.

Which browsers support SVG favicons?

All current versions of the major browsers support SVG favicons: Chrome and Edge since 2020, Firefox since 2015 and Safari since 2025. Can I use lists the first version of each:

Can I use adds two conditions: the server must send the file as image/svg+xml, and Chromium browsers show the SVG as a static image, so scripts and external files don’t run.

What should you ship alongside an SVG favicon?

Ship an SVG together with a 32 × 32 px favicon.ico, a 180 × 180 px Apple touch icon, and 192 × 192 and 512 × 512 px PNGs for installable web apps. The SVG covers browser tabs at any size; the other files cover what an SVG can’t.

• favicon.ico. Google Search’s favicon guidelines list BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, and no SVG. An .ico also serves older browsers and tools that ask for /favicon.ico by default.
• apple-touch-icon.png, 180 × 180 px. iPhones and iPads use a PNG when someone adds your site to the Home Screen.
• icon-192.png and icon-512.png. Android and installable web apps list PNG icons in the manifest; our PWA icon guide covers the maskable one.

An SVG on its own is enough for an internal tool or a prototype whose users all run current browsers and that doesn’t need a favicon in Google Search. A public site should keep the set; our favicon sizes guide explains each file.

What markup should you use for an SVG favicon?

Use two rel="icon" links, with sizes="32x32" on the .ico one, followed by the Apple touch icon and the manifest:

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

The sizes="32x32" on the first line matters. In AI Icon Creator’s test we loaded nine combinations of link tags in Chrome 154 on a Mac with a 2× screen and read which file the tab used from Chrome’s DevTools target list. Our favicon.ico held 16, 32 and 48 px images. An .ico link with no sizes or with sizes="any" won over the SVG whichever link came first, and one that listed 16x16 32x32 48x48 won when it came first. Giving the .ico sizes="32x32" made Chrome use the SVG in both orders.

That includes the markup in web.dev’s 2022 article on adaptive favicons, which puts sizes="any" on the .ico link; in Chrome 154 it showed the .ico. The article also tells you to open the Network panel and check which icon is used, which is good advice because an SVG and an .ico often look alike. MDN defines sizes="any" as meaning the icon can be scaled to any size, as a vector format like SVG can, which fits the SVG line better than the .ico. An .ico with different sizes inside could behave differently, so test yours.

How do you make a dark mode SVG favicon?

To make an SVG favicon follow dark mode, put a @media (prefers-color-scheme: dark) rule in a <style> element inside the SVG file. web.dev says SVG favicons with inline media queries are supported in Firefox and Chromium-based browsers.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    path { stroke: #1b1033; }
    @media (prefers-color-scheme: dark) {
      path { stroke: #ffffff; }
    }
  </style>
  <path d="M14 36l14 14 24-30" fill="none" stroke-width="10"
        stroke-linecap="round" stroke-linejoin="round" />
</svg>

In AI Icon Creator’s test, Chrome 154 drew this glyph dark when it reported light mode and white when it reported dark mode, while a copy with a fixed dark stroke stayed dark on a dark tab bar and nearly vanished.

Two cautions. The rule follows the colour scheme the browser reports, not the colour of your tab bar, so if a browser theme disagrees with the system setting, a white glyph could land on a light tab. And Apple doesn’t document whether Safari applies the rule, so we haven’t tested it there. The safest favicon is a solid tile whose colours work on both light and dark tab bars; use the media query to fine-tune it, not to rescue a glyph that vanishes.

How do you keep an SVG favicon readable at 16 px?

An SVG favicon is drawn at 16 CSS px, which is 16 pixels on a standard screen and 32 on a 2× screen, so it has to be bold. On a 64-unit viewBox one pixel at 16 px is 4 units wide: keep strokes at least 4 units thick, use two or three colours, leave out text and check the real 16 px render before you ship.

In AI Icon Creator’s test, a tile with one 8-unit stroke stayed readable at both sizes, while a gradient icon with 1 to 1.5-unit lines and steam became a smudge at 16 px. Our guide to keeping an icon legible at small sizes has a longer checklist. If you need a bold mark to start from, try one:

Why isn’t my SVG favicon showing?

An SVG favicon usually doesn’t show because a listed .ico won over it, the file is missing its XML namespace or has the wrong content type, or it refers to files that can’t load. We tested the last three in Chrome 154:

• A listed .ico wins. See the markup above; add sizes="32x32" to the .ico link.
• No xmlns. An SVG without xmlns="http://www.w3.org/2000/svg" on the root element failed to load as an image.
• The wrong content type. The same SVG served as text/plain failed to load; Can I use says the server must send image/svg+xml.
• External images and fonts. An SVG that linked an external image drew Chrome’s broken-image placeholder instead. SVG favicons are static images, so embed images as data URIs and convert text to outlines.
• An old cached icon. Browsers cache favicons for a long time, so check in a private window and give the file a new name or a version query when you change it.

A viewBox isn’t a cause of failure in Chrome, because our SVG without one (it had a width and height) still loaded and scaled to 16 px, but keep it: it is what lets the drawing scale to any size.

Frequently asked questions

Can SVG be used for favicon?

SVG can be used for a favicon in Chrome, Edge, Firefox, Opera, Samsung Internet and, from version 26, Safari, which together reach about 91.6% of web users. Keep a 32 × 32 px favicon.ico beside it for Google Search and older tools, and give that .ico link sizes="32x32" so Chrome uses the SVG.

Which is better for a favicon, SVG or PNG?

An SVG is better for sharp tabs at any size and for dark mode, and a PNG is better where an SVG isn’t accepted: Google Search’s favicon list includes PNG and not SVG, and iPhones use a PNG Apple touch icon. Most sites should ship both: an SVG for current browsers and PNG or .ico files for everything else.

How can I create a favicon ICO from an SVG image?

You create a favicon .ico from an SVG by rendering the SVG at 16, 32 and 48 px and packing the images into one file. Our free SVG to ICO converter does that in your browser, and the favicon converter builds the whole set, including the Apple touch icon and manifest icons.

Does Safari support SVG favicons?

Safari supports SVG favicons from version 26.0, on Mac and iPhone. WebKit’s announcement says Safari 26 supports the SVG file format for icons everywhere there are icons in the interface, including favicons. Older Safari versions ignore the SVG, so keep an .ico or PNG link for them.

Can an SVG favicon change in dark mode?

An SVG favicon can change in dark mode when the SVG contains a prefers-color-scheme: dark media query, which Chrome and Firefox apply. The rule follows the colour scheme the browser reports and not your tab bar’s colour, so a solid tile that reads on light and dark is the safer design. Safari’s behaviour isn’t documented.

Ready to make your icon?