How to Make an SVG Favicon from a PNG

Your logo looks perfect on your homepage, then turns into a fuzzy little smudge in the browser tab. That blur is a resolution problem, and the fix is to serve the tab icon as a vector. Here's why an SVG favicon stays sharp, and exactly how to make one from the PNG you already have.

Why use an SVG favicon?

A favicon has to render at a surprising range of sizes: 16x16 in a crowded tab, 32x32 in a bookmark bar, larger again on a high-DPI display that doubles every pixel. A PNG favicon is locked to the dimensions you exported it at, so the browser scales it up or down and the edges soften.

An SVG is drawn from math — paths and curves the browser rasterises fresh at whatever size it needs. One file covers every case and stays crisp on a Retina screen without you exporting a dozen sizes. It's also tiny: a simple logo mark as SVG is often smaller than the equivalent set of PNGs, and you maintain one file instead of a folder of them.

There's a bonus most people miss: because an SVG is just markup, you can make the favicon respond to the browser's dark mode with a single media query inside the file, so your mark stays legible against both light and dark tab bars. A flat PNG can't do that — you'd have to ship and switch two separate images.

SVG vs ICO vs PNG favicon: which should I use?

	SVG	ICO	PNG
Stores	Vector paths	Bundled bitmaps	Single bitmap
Scales without blur	Yes	No	No
Sharp on high-DPI	Yes	Only if sized	Only if sized
One file, all sizes	Yes	Several sizes baked in	One size each
Browser support	Modern only	Universal	Universal

The practical answer is both: ship an SVG as the primary icon and a small ICO or PNG as the fallback. Modern browsers pick the SVG and render it sharp at any size; older ones ignore it and fall back to the bitmap. Two small files cover every visitor.

How do I make an SVG favicon from a PNG?

If your logo only exists as a PNG, convert it to a vector first. The whole flow takes under a minute:

1. Convert the PNG to SVG. Open swiss-vector-svg.com and drop your logo PNG into the drop zone. It traces the image into layered vector shapes in a few seconds and shows a watermarked before/after preview.
2. Check the trace. Favicons are tiny, so simplify ruthlessly. If the preview shows stray specks, raise the Detail slider and re-trace; a logo with two or three flat colours reads far better at 16px than a busy one. Previewing is free and needs no account.
3. Download the clean SVG. Sign in and spend one credit to download the unwatermarked file. See the PNG to SVG converter for the general flow.
4. Trim and name it. The SVG's viewBox matches your PNG's pixel size (a 512x512 PNG gives 0 0 512 512), so start from a square PNG to get the square viewBox that centres in the tab. An opaque PNG background comes through as a full-size shape at the bottom of the file; delete it, or start from a transparent PNG (see how to make an SVG with a transparent background). Then save it as favicon.svg in your site's root directory.

How do I add the SVG favicon to my site?

Point your HTML <head> at the SVG, with a bitmap fallback for older browsers:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="alternate icon" href="/favicon.ico" />

A browser that understands SVG uses the first line; one that doesn't skips it and takes the PNG or ICO. Order matters less than the type attribute — that's the hint the browser reads to decide what it can render.

Do all browsers support SVG favicons?

Current Chrome, Edge, Firefox, and Safari all render SVG favicons, which covers the overwhelming majority of visitors. Internet Explorer and some older mobile browsers don't, so the bitmap fallback above is doing real work — don't drop it.

Two gotchas catch people out. First, favicons render in a restricted mode: external image references, <script> tags, and external stylesheets are ignored, so keep the SVG self-contained with inline styles. Second, browsers cache favicons hard — if a change doesn't appear, open the file URL directly to confirm it loads, then hard-refresh or test in a private window.

That's the whole job: vectorize the logo once, drop in a favicon.svg, and add a fallback line. One sharp icon, every tab, every screen.