SVGFlow
Open editor

Favicon generator

Turn one SVG into the complete favicon set: a real favicon.ico with 16, 32 and 48 px inside, the apple-touch icon, the two manifest PNGs, and the head markup to reference them. Rendered in your browser — nothing is uploaded.

Previewno file
Drop an SVG to build a favicon set
Or paste markup below · max 2 MB
Generated setno file
Open an SVG to render the set.
Head markup
Open an SVG to see the link tags.
site.webmanifest
Open an SVG to see the manifest.
Padding — 0%
Background

If the mark reads badly at 16 px, simplify it in the editor first — favicons are the one place where less drawing is more icon.

How it works

The SVG is rendered onto square canvases at 16, 32, 48, 180, 192 and 512 pixels, contain-fitted and centred, with optional padding. The three small sizes are packed into a single favicon.ico — a hand-written ICO container carrying PNG-compressed images, which every browser and Windows since Vista reads. The apple-touch icon is always composited onto the background colour, because iOS fills transparency with black. Alongside the images you get the four <link> tags and a minimal site.webmanifest.

The SVG itself is the best favicon for browsers that take it — it is listed first in the head snippet, with the .ico as the universal fallback.

When to use it

Every site ships this set once, and it is tedious to produce by hand — six renders, a container format from 1992, and markup nobody remembers. One pass here covers browser tabs, bookmarks, iOS home screens, Android and PWA installs. Rerun it whenever the mark changes.

Common problems

  • The icon is mush at 16 px. Detail that reads at 512 disappears at 16. Check the 16 px preview specifically; if it fails, simplify the mark in the editor — fewer shapes, thicker strokes, no text.
  • The new favicon doesn't show up. Browsers cache favicons aggressively, often ignoring a normal reload. Bump the URL (/favicon.ico?v=2) or test in a private window.
  • The apple-touch icon has an ugly background. It cannot be transparent, so pick the background colour deliberately — usually the brand colour or white, not the default black iOS would give you.
  • Dark browser tabs swallow a dark mark. The ICO cannot adapt, but the SVG favicon can carry a prefers-color-scheme media query in a <style> block — add it before generating.

Notes

  • The .ico carries PNG-compressed images, which every browser and Windows since Vista reads.
  • Keep the SVG favicon simple: at 16 px, fine strokes and small text disappear. Check the 16 px preview before shipping.
  • The apple-touch icon is always rendered on a background — iOS fills transparency with black otherwise.

Related tools