Developer Web

Favicon sizes

16 × 16 1:1

JPG or PNG

16 × 16

Drop an image to check it Optional — the spec is above either way. Nothing is uploaded.

Cropped in your browser · your image is never uploaded

Local · design at 32, not at 512

A 32 × 32 for the tab, a 180 × 180 Apple touch icon, a 192 × 192 and a 512 × 512 for Android and PWA installs. That set covers essentially every modern browser and device.

How to use the favicon sizes

1 Read the dimensions above. That is the whole answer if the spec is all you came for.

2 Drop your own image in to check it against the spec — size, aspect ratio and file weight are each checked separately.

3 Turn on the safe zone to see what gets cropped or covered, then download the cropped version at the exact size.

The historical advice to ship a multi-resolution .ico file is largely obsolete: modern browsers happily take a PNG, and an SVG favicon works in most of them and scales perfectly. What has not changed is that 16 and 32 pixels are genuinely tiny — a full logo will not survive, and the icons that work are a single letter, a single shape or a strong silhouette. Design at 32 first and scale up, rather than shrinking a logo down and hoping. The Apple touch icon is the one that must not have transparency: iOS composites it onto a black background, which turns a transparent PNG into a dark square.

Questions

What favicon sizes do I need? −

32 × 32 for the tab, 180 × 180 for Apple touch, and 192 and 512 for Android and PWA.

Do I still need an .ico file? +

Why does my Apple touch icon have a black background? +

Can I just use my logo? +

Where do the files go? +

Sources

MDN — the favicon and link rel icon

Was this tool any good?

INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING