SVG Favicons – When to Use Them & Browser Support
Published November 23, 2025 · Updated June 9, 2026
Use an SVG favicon as your primary icon — one scalable file, sharp at every size, dark-mode-ready — with a favicon.ico fallback for Safari and older clients.
Use an SVG favicon as your primary icon. It’s one scalable file that stays sharp from a 16px tab to a 512px tile, weighs almost nothing, and can switch colours for dark mode — all from a single asset. Declare it with <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Then keep a favicon.ico alongside it as the fallback, because Safari and a handful of older clients don’t render the SVG favicon and fall back to ICO or PNG. Chrome, Edge, and Firefox use the SVG; everything else uses the ICO. Ship both and every browser is covered.
In one line: SVG is the primary favicon, ICO is the safety net — you ship both.
How to declare an SVG favicon
Two lines in your <head> do the job. Browsers that understand SVG pick it; the rest fall back to the .ico:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">The type="image/svg+xml" attribute is what tells the browser the second file is a vector and lets supporting browsers prefer it. Order doesn’t decide the winner — capability does. A browser that supports SVG favicons (Chrome, Edge, Firefox) uses favicon.svg; a browser that doesn’t (Safari) ignores that line and uses favicon.ico. Never use rel="shortcut icon" — it was never a valid relation and adds nothing. (Full tag-by-tag breakdown →)
SVG favicon browser support, honestly
Here’s the real state of support in 2026 — no overstating Safari:
| Browser | SVG favicon | What it uses instead |
|---|---|---|
| Chrome (desktop & Android) | Full | — |
| Edge | Full | — |
| Firefox (desktop & Android) | Full | — |
| Safari (macOS & iOS) | Not used | Falls back to favicon.ico / PNG |
| Older / embedded clients | None | favicon.ico |
The headline: Chrome, Edge, and Firefox render SVG favicons completely — tab, bookmarks, history. Safari does not use the SVG favicon at all and quietly falls back to your favicon.ico or an Apple touch icon. That single fact is why “SVG only” is never safe: drop the ICO and Safari users get a blank icon. Keep the multi-size .ico and Safari renders cleanly without ever touching the vector. (Do you still need an ICO? →)
What makes an SVG favicon valid
A favicon SVG is stricter than a general illustration. Get these right or it renders cropped, blank, or oversized:
- Include a
viewBox. This is the single most common failure. The root<svg>must declare a coordinate system — for exampleviewBox="0 0 32 32"— or the browser can’t scale it down to tab size. NoviewBox, no reliable render. - Keep it simple and flat. Favicons display at 16–32px most of the time. Drop gradients, filters, fine detail, and tiny text — they turn to mush. One bold shape and strong contrast read best.
- No external references. Everything must be self-contained. No linked fonts (convert text to paths/outlines), no externally-referenced images, no remote stylesheets — a browser won’t fetch them for a favicon.
- No scripts or animation. Browsers render the static SVG and ignore
<script>and<animate>. Keep the markup inert. - Set the right MIME type. Your server must send
Content-Type: image/svg+xml. Some shared hosts default SVG totext/plain, which makes the file silently fail.
The dark-mode trick: one file, two themes
The reason SVG is genuinely special: you can embed a media query inside the SVG so it recolours itself when the operating system switches to dark mode. No second file, no extra <link>:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #18181b; }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff; }
}
</style>
<path d="..." />
</svg>A dark logo on light tabs, a light logo on dark tabs — from one favicon.svg. Supporting browsers honour it automatically; Safari (which ignores the SVG anyway) just shows your ICO. This is the cleanest dark-mode approach available, and the full walkthrough — including the ICO/PNG fallback for Safari — is in the dark mode favicon guide.
Generate the SVG plus the fallback set in one go
Hand-rolling a valid favicon SVG means adding the viewBox, flattening artwork, outlining text, and optimising the file — then separately exporting a multi-size .ico so Safari and old clients still work. FaviconBuilder does all of it from one upload: feed it an SVG (preferred) or a PNG/JPG at 512×512 or larger and it outputs the optimised favicon.svg, the multi-size favicon.ico, the Apple touch and PWA icons, and the exact HTML to paste — free, no account, and your image never leaves your browser.
When SVG is not enough on its own
SVG is the primary icon, never the only one. Ship the fallbacks for these cases:
- Safari (macOS and iOS). It doesn’t use the SVG favicon — period. Without a
favicon.ico, Safari users see a blank tab icon. This alone settles the “SVG only” question. - Google search results. Google’s SERP favicon prefers an ICO or PNG served from your site root, not the SVG. Keep the
favicon.icoto control the icon next to your listing. (Favicon SEO details →) - Older and embedded clients. Legacy browsers, intranet environments, and in-app webviews fall back to
favicon.ico. The auto-requested root.icocovers them. - Home-screen and PWA icons. SVG doesn’t cover the 180×180 Apple touch icon or the PWA manifest icons — those are PNGs at fixed sizes. (Every size you need →)
The fix for all four is the same: keep a multi-size favicon.ico (and the PNG set) next to the SVG.
Clearing up the Safari “mask-icon” confusion
Older tutorials tell you to add <link rel="mask-icon" href="/safari-pinned-tab.svg" color="...">. That is a separate legacy feature and not the modern SVG favicon. mask-icon was Safari’s old pinned-tab system: it used a flat, single-colour SVG silhouette that Safari tinted with the color attribute, only for tabs pinned in the macOS sidebar. It has nothing to do with rel="icon" type="image/svg+xml".
That pinned-tab mechanism is deprecated and no longer needed — current Safari uses your regular favicon (the ICO/PNG fallback) for pinned tabs too. So: skip mask-icon entirely. Seeing it in a guide is a reliable sign the guide predates the modern SVG-favicon era and is conflating two unrelated things.
Summary
SVG is the modern primary favicon: one scalable, dark-mode-capable file declared with <link rel="icon" href="/favicon.svg" type="image/svg+xml">. But you always pair it with a favicon.ico fallback, because:
- Chrome, Edge, and Firefox render the SVG fully.
- Safari does not use the SVG favicon — it falls back to ICO/PNG.
- Google’s SERP and older clients also prefer ICO/PNG.
- The SVG must have a
viewBox, stay simple, and avoid external references and scripts. rel="mask-icon"is a dead legacy feature — not the modern SVG favicon. Don’t use it.
Ship the SVG and the ICO together and every browser, search result, and device is covered.
Continue reading:
Frequently asked questions
Do all browsers support SVG favicons?
No. Chrome, Edge, and Firefox render SVG favicons fully. Safari does not use the SVG favicon — it falls back to your favicon.ico or PNG. That's why you ship both: SVG as the primary icon and an ICO as the fallback.
How do I add an SVG favicon in HTML?
Add <link rel='icon' href='/favicon.svg' type='image/svg+xml'> in your <head>, and keep a <link rel='icon' href='/favicon.ico' sizes='32x32'> line above or below it as the fallback. Browsers that support SVG use it; the rest use the ICO.
Does an SVG favicon need a viewBox?
Yes. Without a viewBox the browser can't scale the artwork correctly and may render it cropped or blank. Add something like viewBox='0 0 32 32' to the root <svg> tag, keep the art simple, and avoid external references such as linked fonts or images.
Can an SVG favicon change colour in dark mode?
Yes. You can embed a @media (prefers-color-scheme: dark) block inside the SVG to recolour it when the OS is in dark mode — one file that adapts. See the dark mode favicon guide for the full technique.
Is the Safari mask-icon the same as an SVG favicon?
No. rel='mask-icon' was a legacy Safari pinned-tab feature that used a separate monochrome SVG, and it's no longer needed. It is unrelated to the modern rel='icon' type='image/svg+xml' favicon — don't confuse the two.