Which favicon format should I use?

Ship all three. An SVG as the primary icon for modern browsers, 16 and 32 pixel PNGs as raster fallbacks, and a multi-resolution favicon.ico at the site root for everything that requests it blindly.

Do modern browsers still use favicon.ico?

Yes, as a fallback. Browsers, feed readers and command-line tools request /favicon.ico when no link tag points elsewhere, so omitting it produces a 404 on a request you will never see in your analytics.

Is SVG better than PNG for a favicon?

SVG stays sharp at any size and can react to dark mode, but Safari does not reliably use it for the tab icon. Treat it as the primary icon with PNG fallbacks, not a replacement.

Why does my favicon look blurry?

Almost always because a small source was upscaled. Draw the master at 512 pixels or larger and export down to each target size, instead of scaling a 16 pixel file up to 180.

Does the order of link tags matter?

Yes. Put the SVG first with sizes set to any, then the PNGs, then the .ico last. Browsers generally take the first format they can render, so the order encodes your preference.

Favicon formats explained: ICO, PNG and SVG

A favicon looks like a solved problem until you see the same site in six places. The image in a Chrome tab, an iOS home screen tile and a bookmark list can be three different files in three different formats — and each format survives for a reason that goes back decades.

The short version: ship an SVG first, the PNGs next, and a favicon.ico at the site root last. Each one covers a surface the others miss.

Where each format came from

Format	Origin	Strengths	Where it falls short
ICO	The Windows icon container, early 1990s	Holds 16, 32 and 48 pixel images in one file, and is fetched without any link tag	Not vector; carries more bytes than a single PNG; awkward to hand-edit
PNG	The web image format of the 1990s onwards	Crisp at its exact pixel size, supported everywhere, precise transparency	Needs one file per size, so you ship several; no resolution independence
SVG	Vector format; Chrome began using it as a favicon in 2020, Firefox earlier	Sharp at any size, a tiny file, and it can swap colours for dark mode with a CSS media query	Not used for the tab by Safari, so it cannot stand alone

How browsers actually choose

Browsers do not pick the largest image, or the first one in the document. They collect every rel="icon" link, read its sizes attribute, and match it against the slot they need to fill.

A tab slot is 16 CSS pixels wide, but on a 2× display the browser wants a 32 pixel raster. Given both, it takes the 32.
sizes="any" tells the browser the resource is scalable. That is how an SVG — and a multi-resolution ICO — advertise themselves.
If no link tag is usable, the browser falls back to requesting /favicon.ico at the site root.

That last rule is the reason the .ico survives at all. Browsers still request it blindly when nothing else is declared.

Two legacy details are worth knowing. rel="shortcut icon" is an Internet Explorer alias for rel="icon"; it still works but says nothing useful. And a favicon link with neither type nor sizes gives the browser nothing to match on, so it becomes a last resort.

Why a favicon.ico still earns its place in 2026

Three concrete reasons:

The automatic root request. Anything that does not parse your HTML asks for /favicon.ico. If the file is missing, that request returns a 404 you will never notice in your logs.
Feed readers and link tools. Many clients that display a site icon read the root file rather than your <head>.
A safety net. If a build strips or misplaces your link tags, the .ico keeps a tab icon working.

The cost is one extra file with three sizes inside it. That is cheap insurance.

The size map

Size	Used by
16×16	Browser tab on standard-density displays; some bookmark lists
32×32	Tab on high-density displays; desktop shortcut icons
48×48	Windows site shortcuts, and the pinned case inside the ICO
180×180	Apple touch icon, used on the iOS home screen
192×192	Android home screen; web app icons
512×512	PWA install prompt and splash screen

Draw the master at 512×512 or as a vector, then export down. Upscaling a 16 pixel file is the single most common cause of a blurry icon.

Linking them up

<!-- 可缩放的放最前，其次是位图，最后是兼容用的 .ico -->
<link rel="icon" type="image/svg+xml" href="/icon.svg" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico" sizes="any">

The order is the preference. Safari skips the SVG line and falls through to the PNGs; modern Chrome and Firefox take the SVG.

Common mistakes

Shipping only an SVG. It is the sharpest option and the least compatible. Without raster fallbacks, Safari and older browsers show a blank tab.

Pointing the ICO at a single tiny bitmap. An .ico that carries only a 16 pixel image gets scaled up for the 32 pixel case. Put 16, 32 and 48 in the container.

Renaming the root file. The automatic request is for /favicon.ico, spelled exactly. favicon.png at the root is not requested the same way.

Trusting sizes without matching the file. Declaring a 32 pixel icon that is actually 16 pixels wide makes the browser upscale it. Keep the attribute honest.

Delivering an SVG that needs external fonts. A favicon must be self-contained. If it wants a font it does not have, the glyphs vanish.

Forgetting dark mode. A dark mark on a dark tab bar disappears. Give the SVG a prefers-color-scheme block, or keep a version with a light outline.

Where this tool fits

The favicon generator takes one source image, exports the SVG plus the full raster set, and writes the link block above for you — all drawn in the browser. After deploying, run the site through the favicon checker to confirm each file resolves. For the complete file list, see The favicon files every site needs.