Why an SVG favicon

One vector file covers every tab size and pixel density. Current browsers pick it up from a single <link rel="icon" type="image/svg+xml">, so there is no need to ship a separate PNG for each device scale.

An SVG favicon does not replace favicon.ico. Crawlers and older software still request the ICO at the site root, and browsers without SVG favicon support fall back to it. Ship both. ICO vs SVG covers how browsers choose.

What the generator does with your SVG

  • Your markup is nested untouched inside a 512-unit wrapper that adds the background, padding, corner radius and offsets. Its own defs, gradients and filters survive.
  • With no styling applied and a viewBox already present, the file passes through byte for byte.
  • Every raster size (16, 32, 48, 96, 180, 192 and 512px) is rendered from the vector, not scaled from a bitmap.
  • Scripts, event handlers, external references and remote CSS imports are stripped by an allowlist sanitizer before anything is drawn.

Preparing an SVG that works as a favicon

  1. Give it a square viewBox. A wide logo will be letterboxed to fit a square tab icon.
  2. Crop to the mark. Wordmarks become unreadable at 16px, so use the symbol alone.
  3. Convert text to outlines in your design tool, or use the text mode, which does this for you.
  4. Avoid hairline strokes. A 1-unit stroke on a 512-unit canvas disappears at 16px.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

The type attribute lets browsers that cannot render SVG favicons skip the file without downloading it. The full snippet, with the Apple touch icon and manifest, comes in the zip.

Questions

Do I have to upload the file?

Nothing leaves your browser. Drop the file on the editor, choose it with the file picker, or copy the file and paste it onto the page. To send SVG markup as text, use the HTTP API svg field.

Can an SVG favicon follow dark mode?

Yes. An SVG can carry a prefers-color-scheme media query. Turn on the dark mode variant and the generated icon.svg holds both looks.

Why is there no icon.svg when I upload a PNG?

A raster image has no vector form to put in the SVG. You still get the ICO and every PNG, but for an SVG favicon you need an SVG source.