SVG favicons, the 2026 playbook

Why SVG is the primary favicon format in every modern browser, how browsers pick between formats, and the two lines of HTML that cover every device shipping today.

An SVG favicon is one file that every modern browser will scale to any size, any DPI, any theme. It replaces the three or four raster files a site needed a decade ago. This guide explains what the modern setup looks like, why SVG is the primary format, and what you still need for legacy coverage.

Why SVG won

A favicon gets asked for at wildly different sizes. The browser tab wants 16 pixels. The Android home screen wants 192. A pinned Windows tile wants 310. A Retina MacBook at 2x scaling doubles every request. Raster formats have to ship every size or suffer upscaling blur. An SVG ships once and renders crisp at every request because it is math, not pixels.

SVG favicons also survive compression, proxy caches, and the ancient favicon.ico convention where browsers would blind-request the root path. Modern browsers follow the <link> tags you give them and prefer SVG when available.

The modern tag set

Two to five lines of HTML is enough for every device shipping today:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Modern browsers pick the SVG. Older ones fall through to the PNG or the ICO. iOS reads the apple-touch-icon. Android and Chrome on desktop read the manifest for home screen and PWA icons.

How the browser chooses

When you give the browser multiple <link rel="icon"> tags, it picks the best match for the current context. Support for SVG is the deciding factor for the tab icon. For a home screen or bookmark, the OS often reaches for a specific size hint.

The sizes attribute on a <link> is a hint, not a constraint. The browser is free to ignore it and pick the source that scales best. That is why the SVG, which has no size attribute, wins in any context that cares about crispness.

What about the .ico file?

Keep it. /favicon.ico at the root of your domain is the path browsers blindly request before they parse any HTML, and it is the last line of defence for search crawlers, scrapers, RSS readers, and a long tail of tools that never learned to read a <link> tag. A 16, 32, 48 multi-resolution ICO at the root costs a few kilobytes and closes the loop.

Hand-authoring vs generating

You can hand-author an SVG favicon in a vector tool, but most teams generate the set from a single source SVG so every resolution and file type stays in sync with the brand. That is exactly what Faviconry does in the browser, without uploading the source anywhere.

Framework-specific setup

Link tags and file locations differ per framework:

Frequently asked questions

Do browsers actually support SVG favicons?

Every major browser released after early 2022 supports SVG favicons. Chrome, Edge, Firefox, Safari, Opera, and Vivaldi all read rel="icon" type="image/svg+xml" directly. For older browsers you fall back to a PNG or multi-resolution ICO.

Why is SVG better than a multi-resolution ICO?

An SVG is a single file that scales cleanly to any size. A multi-res ICO is three or four rasterised bitmaps bundled together. SVG survives Retina displays, 4K monitors, and the 16 pixel tab icon without pixel snapping artefacts, and is usually smaller on disk than a decent ICO.

Can SVG favicons animate or respond to dark mode?

Yes. You can embed a prefers-color-scheme media query directly inside the SVG file to swap colours when the user flips to dark mode, and you can even use CSS animations. No external JavaScript, no separate files.

Related guides