Do browsers support SVG favicons?

All current major browsers do, referenced through a standard link rel="icon" tag with type="image/svg+xml". Support arrived at different times across browsers, which is why a favicon.ico fallback is still worth keeping for older versions and for tools that fetch icons outside a browser.

What size should an SVG favicon be?

Give the root svg element a viewBox — a square one such as 0 0 32 32 is conventional — and let the browser scale it. What matters is not a pixel size but whether the artwork still reads at 16 pixels wide. Zoom out to that size before you commit.

Do I still need a favicon.ico?

Keep one. It costs a few kilobytes and covers old browsers, feed readers, and various crawlers that only look for /favicon.ico. List the SVG first in your markup so modern browsers prefer it.

Can an SVG favicon adapt to dark mode?

Yes, and this is the main thing an ICO cannot do. A prefers-color-scheme media query inside the SVG lets the icon switch colors with the browser theme, which keeps a dark monogram from disappearing against a dark tab strip.

Why does my favicon look blocky after converting from ICO?

Because the source had very little to work with. An ICO that only contains a 16x16 frame holds 256 pixels in total, and tracing cannot add detail that was never there. Convert from the largest frame in the container — 48x48 or 256x256 if it exists — or redraw the mark.

Why is my new favicon not showing up?

Favicons are cached unusually aggressively. Load the icon URL directly to confirm it is being served with the right content type, then do a hard reload. Some browsers only refresh the tab icon after the tab is closed and reopened.

Guide

How to make an SVG favicon.

One SVG can replace the stack of 16, 32, and 48-pixel bitmaps a favicon used to require. Here is how to design artwork that survives at 16 pixels, the markup to reference it, and the fallback still worth keeping.

An SVG favicon is a single vector file referenced from a <link rel="icon">tag. It replaces the old stack of 16, 32, and 48-pixel bitmaps: one file covers every size and pixel density a browser might ask for, and it can change color with the user’s theme. All current major browsers support it. The work is not in the markup — that is three lines — but in making artwork that still reads at 16 pixels wide.

Design for 16 pixels first

A favicon is displayed smaller than almost any other asset you produce. At 16 pixels, a full logo lockup becomes a grey smudge. Design the icon at that size and scale up, not the other way round.

Use one element — a monogram, a symbol, or a single distinctive shape from the full logo. Not the wordmark.
Keep two or three colors — with strong contrast between them. Subtle tonal differences vanish at this size.
Thicken thin strokes — a hairline that looks elegant at 200 pixels disappears at 16.
Drop fine detail — inner cut-outs, small counters, and texture all turn to mud.

The honest test: shrink the artwork to 16 pixels on screen and ask a colleague what it is. If they hesitate, simplify further.

Prepare the SVG file

Give the root element a square viewBox — 0 0 32 32 is the conventional choice — and no fixed width or height, so the browser can render it at whatever size it needs. Then strip everything the file does not need: editor metadata, hidden layers, unused definitions, and comments. A favicon should be a couple of kilobytes at most.

Two details are easy to miss. Convert any text to outlines, because the browser renders the icon in a context where your font may not be available. And do not rely on external references of any kind — a favicon is loaded in isolation, so a linked stylesheet or an external image will simply not resolve.

Reference it correctly

Put the SVG first and keep an ICO fallback after it. Browsers pick the last icon they understand, so ordering matters less than coverage, but this order is the conventional one:

<link rel="icon" href="/icon.svg" type="image/svg+xml"> — the modern path.
<link rel="icon" href="/favicon.ico" sizes="32x32"> — for older browsers and for crawlers that only ever request /favicon.ico.
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> — iOS home screens still want a 180-pixel PNG.

Serve the SVG with a Content-Type of image/svg+xml. Served as plain text, it will silently fail to render and you will spend an afternoon blaming your markup.

Make it follow the browser theme

This is the capability an ICO cannot match, and the main reason to bother. A dark monogram on a transparent background disappears against a dark tab strip. Because an SVG can carry its own stylesheet, the icon can respond to the user’s color scheme:

Add a <style> block inside the SVG with a prefers-color-scheme: dark media query that repaints the fill. The browser applies it in the tab, so the icon stays legible in both themes from a single file. Test it by toggling your system theme with the tab visible — some browsers only re-evaluate the icon on reload.

Converting an existing icon

If the only copy of the mark you have is a bitmap, trace it. An old favicon.ico can be converted to SVG directly, and a PNG app icon works just as well through the PNG to SVG converter. Two things decide the quality of the result:

Start from the largest frame available. An ICO container usually holds several sizes. A 16×16 frame contains 256 pixels in total and traces into something visibly blocky; a 256×256 frame traces cleanly.
Keep the color count low. Four to eight colors suits icon artwork and avoids turning antialiased edges into a halo of extra paths.

Expect to tidy the trace afterwards — straighten edges that should be straight, snap the palette to your exact brand values, and delete any background rectangle you do not want.

When the new icon does not appear

Favicons are cached more aggressively than nearly anything else on the web, and a stale icon is far more common than a broken one. Work through it in this order:

Open the icon URL directly and confirm it renders and has the right content type.
Hard-reload the page, then close and reopen the tab — some browsers only refresh there.
Try a private window, which sidesteps the icon cache entirely.
If you changed the filename, confirm the old /favicon.ico still resolves, since crawlers and feed readers request it by convention regardless of your markup.

Where to convert

The converters that put this guide into practice:

ICO to SVG converter — Trace an existing favicon.ico into a single SVG that covers every size and density.
PNG to SVG converter — Convert a PNG app icon when that is the largest clean copy of the mark you have.
JPG to SVG converter — Rescue a logo from a JPG before turning it into an icon.

Where can I read more?

The output is standard SVG markup, defined by the following public specifications and references:

Written and maintained by the JPGtoSVG team. Last updated August 5, 2026.