SVG to Favicon

SVG favicons are crisp at any size and tiny in file size — but browser support is not universal. Safari, iOS, and PWA contexts all require raster PNGs. This guide covers what works where, and how to produce a complete favicon set that renders correctly everywhere.

Browser support for SVG favicons

SVG favicons are referenced with <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Support breaks down along browser lines:

Why you still need raster PNGs

An SVG favicon covers only the browser tab — and only in Firefox and Chromium. Every other favicon context on every platform requires a raster PNG of a specific size:

• Apple touch icon (180×180) — iOS home screen bookmarks. PNG only. SVG is ignored.
• Android/PWA icons (192×192, 512×512) — Home screen, app drawer, splash screen. PNG only.
• Windows taskbar / tile (32×32, 48×48) — Pinned site shortcuts. PNG only.
• favicon.ico (16×16, 32×32, 48×48) — The universal fallback. ICO container with bitmap sizes.

An SVG-only favicon set leaves roughly 30–40% of users — all Safari users and anyone adding your site to their home screen — with no icon at all. The correct approach is to provide both: an SVG for modern tabs, and a full raster set for everything else.

How to convert SVG to favicon: the reliable method

The most broadly compatible approach is to rasterize your SVG at a large size, then generate the full favicon size set from that raster:

1. Render the SVG at 512×512. Any vector editor (Figma, Illustrator, Inkscape) or browser-based tool can export an SVG as a 512×512 PNG. You can also open the SVG in a browser tab, screenshot at 2× on a retina display, and crop to square.
2. Generate the multi-size set. Use EasyFavicon to produce every standard favicon size from that 512×512 source: 16, 32, 48, 64, 128, 180, 192, and 512px PNGs plus a favicon.ico containing the 16, 32, and 48px bitmaps. Everything runs in your browser — the source image is never uploaded.
3. Add the SVG alongside the raster set. Place the SVG favicon in your site root and reference it before the PNG links in your HTML. Browsers that support SVG will use it; browsers that don't will fall through to the PNG.
4. Test across browsers. Verify the icon appears in Chrome, Firefox, and Safari. Safari is the one that breaks if you skip the raster fallback.

HTML: referencing both SVG and PNG favicons

Order matters. Browsers use the first icon they understand, so list the SVG first, followed by PNG and ICO fallbacks:

<!-- SVG favicon: used by Firefox and Chromium -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- PNG fallback: used by Safari and as a general fallback -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon: iOS home screen, PNG only -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Classic ICO: universal fallback for IE and old browsers -->
<link rel="icon" href="/favicon.ico" sizes="any" />

<!-- Web manifest: required for Android and PWA installation -->
<link rel="manifest" href="/manifest.webmanifest" />

Designing an SVG for favicon use

An SVG that looks great at full size often becomes illegible when rendered at 16×16 in a browser tab. A few design rules for SVG favicons:

• Keep it simple. One or two shapes, flat colors. Gradients, fine lines, and text disappear at 16px.
• Avoid thin strokes. Use filled shapes with a minimum 2px equivalent stroke weight at the 16px view size.
• Test at 16×16 before shipping. Zoom out in your editor or open the SVG in a browser and set the tab icon. If you can't tell what it is, simplify.
• Use a square viewBox. Example: viewBox="0 0 32 32". Favicons are always square. A non-square viewBox produces letterboxing or unpredictable cropping.
• Set explicit fill colors. Don't rely on currentColor — in the favicon context, there is no inheritable color and the icon may render invisible.

File size and performance

SVG favicons are typically under 1 KB — far smaller than even a 16×16 PNG. They stay crisp at every resolution and compress well with gzip. The tradeoff, as described above, is browser coverage. If your audience is heavily Firefox or Chrome (developer tools, technical audiences), an SVG-first approach with PNG fallbacks gives you both performance and coverage. If your audience skews toward Safari (design, consumer, iOS), lead with PNG.

Dark mode and SVG favicons

SVG favicons support the prefers-color-scheme media query via embedded CSS, allowing the favicon to change appearance based on the user's system theme. This is unique to SVG — raster favicons are a single static image. Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: black; }
    @media (prefers-color-scheme: dark) {
      path { fill: white; }
    }
  </style>
  <path d="M16 2 L30 30 L2 30 Z" />
</svg>

This works in Firefox and Chromium. Safari will ignore the SVG entirely (no dark mode favicon). You can combine a dark-mode-aware SVG with separate light and dark PNG favicons via media="(prefers-color-scheme: dark)" on the link tag for maximum coverage.