Favicon Size: Every Size and Format a Site Needs

What size should a favicon be?

No specification fixes one favicon size. HTML lets a page list several icons with their sizes and leaves the choice to the browser, and each service that shows the icon states its own requirement.

One ICO file holds several images at different sizes and colour depths, and software picks the entry that suits the space it has. Common practice for a website icon is 16, 32 and 48 pixels, but no specification requires a particular set.

A set that covers a browser tab, Google Search, Apple devices and an installed web app is an ICO with 16, 32 and 48 pixel entries, a 180x180 PNG touch icon, and PNG icons at 192x192 and 512x512 in the web app manifest.

Google Search is covered by the same set. It reads the icon link on your home page, it accepts a touch icon as one of those links, and the touch icon is larger than the 48 pixels it recommends.

Can a favicon be 512x512?

Yes, as a PNG. HTML puts no ceiling on an icon, and a browser picks whichever declared icon suits the space it has to fill.

The sizes attribute on an icon link counts raw pixels, not CSS pixels, and the keyword any marks a scalable icon such as an SVG.

An ICO file cannot hold an icon that large. In its directory, the width and height are single bytes, and the value 0 stands for 256 pixels. Microsoft documents that encoding for ICONRESDIR, the resource form of the same pair of bytes; no Microsoft page states it for ICONDIRENTRY itself.

A 512x512 icon has to be a PNG file of its own, because an ICO entry can be no larger than 256x256 pixels.

The one place a 512 pixel icon is asked for by name is an installed web app, and a maskable version of that icon has a rule of its own:

Chromium browsers need at least a 192x192 and a 512x512 icon in the manifest of an installable web app, and scale those two when no other sizes are given.

A maskable icon keeps what matters inside a centred circle whose radius is 40 percent of the icon's size, because the platform may mask off everything outside it.

Can a favicon be a PNG?

Yes. HTML gives an icon link no default file type and only requires the browser to expect an image, so a favicon may be a PNG.

Google Search lists PNG among the favicon formats it supports, and an Apple touch icon is a PNG file. The one place the ICO name still does work is the fallback a browser may use when a page names no icon at all.

When a page declares no icon link, a browser may request /favicon.ico from the root of the site and use that file as the icon.

That makes the ICO the file to keep at the root, even on a site whose icon links all point at PNGs.

What is an ICO file?

An ICO file is a container. It holds several images at different sizes and colour depths, and software takes the one that suits the space it has to fill.

What an entry stores depends on the entry - each image inside is either an uncompressed device-independent bitmap or, from Windows Vista, a complete PNG.

ICO to PNG reads the images the icon file contains and writes each one out as its own PNG, transparency intact. Nothing is compressed again, because both formats store their pixels without loss.

You can open an existing favicon.ico and see each size before replacing it.

How do you create a favicon?

Start from one square picture and write the set from it. The ICO is a conversion; the larger PNG icons are the same square picture at the sizes in the table above.

1. Start from a square picture at least 512 pixels on a side. Google Search requires a square, and an installed web app asks for 512 pixels.
2. Write the ICO with 16, 32 and 48 pixel entries: turn a square PNG into a multi-size ICO, or for a photograph use the JPG to ICO converter.
3. Publish it as /favicon.ico at the root of the site, where a browser looks when a page names no icon.
4. Name the icons in the page head: rel="icon" for the ICO, rel="apple-touch-icon" for the 180x180 PNG, and the manifest's icons list for the 192x192 and 512x512 PNGs.

PNG to ICO resamples the picture to the icon sizes and packs them into one file, carrying the transparency through. A square PNG with a clear background gives the best result.

JPG to ICO squares the photograph, resamples it to the icon sizes and packs them into one file. The background stays opaque, because a JPG has no transparency to carry across.