Favicon size

The favicon size a modern website needs is not one number but a short list: 16, 32 and 48 pixels inside favicon.ico, standalone 16 and 32 pixel PNGs, a 180 by 180 pixel touch icon, and 192 and 512 pixel app icons listed in a web app manifest, one of them padded as a maskable icon. Every one is square. Start from one source of 512 by 512 pixels or larger and produce them all from it.

This guide goes through each favicon size, says what each file is for and where that requirement comes from, and shows the real dimensions and byte counts of a package we generated and measured. It also separates the sizes that a standard or a published rule asks for from the long lists of legacy sizes that get copied between articles.

Favicon size at a glance

Here is the full favicon size list as it ships in our package, with each file's measured dimensions and its size in bytes for a simple two-color logo made from a 1024 by 1024 PNG:

The dimensions in that table are not what we asked the encoder for. They are read back from the finished files, so a resize that did not happen would show up as a wrong number. The whole ZIP, with the manifest and the head snippet, was 25,273 bytes.

Favicon dimensions: why every size is square

Favicon dimensions are always square, a 1:1 aspect ratio, because every place an icon appears gives it a square slot. Google Search Central's favicon documentation makes this an explicit rule for search results: the favicon must be square and at least 8 by 8 pixels, and Google recommends larger than 48 by 48.

If your logo is wide, you have two honest options:

• Pad it. Scale the whole logo down until it fits the square and fill the rest with transparency or a color. Nothing is lost, but a wide wordmark becomes a thin strip.
• Crop it. Use only the symbol, or the first letter. This usually reads better at small sizes, but you choose what to cut.

Our tool always pads, never crops, because it cannot know which part of your logo matters and has no editor to let you fix a bad crop afterwards. It also tells you it padded, with the original dimensions. For the best result, hand it a square source you cropped yourself.

The size of favicon.ico

The size of favicon.ico in pixels is 16, 32 and 48: the file is a container holding three layers, one at each size. In bytes, ours is 15,086, and it is that size for every source because its layers are stored as uncompressed 32-bit bitmaps. The PNG to ICO guide shows the byte-by-byte layout and the arithmetic.

Why those three sizes:

• 16 pixels is the classic tab and bookmark size.
• 32 pixels gives a sharper result where the screen packs more pixels into the same space.
• 48 pixels covers larger surfaces, and it lines up with Google's recommendation of more than 48 by 48 for search.

Larger layers, such as 64, 128 or 256, make the ICO heavier for every visitor while the larger surfaces get their icons from the PNGs and the manifest anyway. Three layers is the modern minimal set.

16x16 and 32x32 favicon PNGs

The 16x16 and 32x32 favicon PNGs are the small icons linked directly from your HTML head with rel="icon", a type="image/png" attribute and a sizes attribute. The HTML standard defines sizes so that a page can offer several icons and let the user agent pick the one that fits, without downloading all of them to find out.

They duplicate two of the ICO layers on purpose. The ICO is the root-level fallback; the PNGs are the explicitly linked, compressed versions. At 346 and 606 bytes they cost almost nothing.

The 16 pixel size is where designs fail. At 16 by 16 there are 256 pixels to work with. A one-pixel line in a 512 pixel source is gone after reduction, and so is small text. Look at the 16 pixel file before you ship; if your mark does not read, simplify the source rather than the small file.

Apple touch icon size

The apple touch icon size is 180 by 180 pixels, a single PNG declared with link rel="apple-touch-icon". It is the image used when someone adds your site to a home screen as a shortcut. Google Search Central also lists apple-touch-icon among the link types it reads when looking for a site's icon.

A few notes on the apple touch icon:

• One size is enough. Older advice lists many touch icon sizes for older devices. One 180 pixel file is the modern minimal answer, and it is the one the link points to.
• Transparency is kept. Our apple-touch-icon.png preserves your source's transparency exactly. Common advice says to flatten it onto a solid background, based on claims about what a home screen does with transparent pixels. We have not measured that on a real device yet, so we do not change your file on the strength of an untested claim. If you want a solid background, give the source one.
• Mind the corners. In case a surface shows the icon inside a rounded shape, keep important detail away from the very corners.

App icon sizes: 192 and 512

The 192 and 512 pixel app icons are listed in the web app manifest, the JSON file a page links with rel="manifest". They are the icons for an installed web app and for any surface that wants a larger icon than the head links offer. In the manifest each one is declared with its src, its sizes as 192x192 or 512x512, and its type as image/png.

512 pixels is the largest file in the package, and it sets the minimum useful source size: anything smaller than 512 by 512 must be enlarged for this icon, and enlarged images look soft. Our tool still produces a complete package from a small source, but it warns you, with the exact dimensions, that the big sizes were scaled up.

Maskable icon size and safe zone

The maskable icon is 512 by 512 pixels with the artwork scaled into the central 80 percent and the margin filled with a solid color. It is listed in the manifest with purpose: maskable. The W3C Web App Manifest defines maskable as an icon designed with a safe zone in mind, so that any part outside the safe zone can be masked away, and MDN describes the same purpose value. The safe zone is a centered circle whose diameter is 80 percent of the icon.

In numbers, for our file: 80 percent of 512 is 409.6, rounded to 410, so the artwork sits in a 410 by 410 square, with a 51 pixel margin on each side (512 minus 410 is 102, split evenly). The margin is filled with the manifest background color, because a masked shape with transparent corners looks like a broken image.

There is also a plain icon-512.png in the package, with the artwork filling the canvas, for every context that does not mask. The manifest lists both, and the purpose value tells them apart; an icon with no purpose counts as any.

SVG favicon size

An SVG favicon has no pixel size: it is a vector, drawn at whatever size is needed. If your source is an SVG, our package includes it as favicon.svg, unchanged, and the head snippet links it with type="image/svg+xml". The PNG and ICO files are still produced, drawn from a 1,024 pixel rendering of your SVG, so every surface has a raster fallback.

What makes an SVG favicon work at small sizes is the same as for any icon: a simple shape and strong contrast. A detailed illustration in SVG form is still unreadable at 16 pixels.

Favicon sizes you can skip

Long favicon sizes checklists include sizes that a modern site can skip. These lists are copied from page to page and often date from years ago. The rule we use for every file in our package is that something must reference it: a link tag, the manifest, the root fallback or a published platform rule. By that rule you can skip:

• Dozens of touch icon sizes. One 180 pixel file is linked.
• Tile images and browser configuration XML files from older desktop platforms that nothing in a modern page links to.
• Very large ICO layers. The larger surfaces use the PNGs.
• Separate 96, 128 or 144 pixel PNGs. Nothing in the snippet points to them.

If a file is not referenced from your head, your manifest or the root, it is not doing anything. Adding it does no harm except weight and clutter; leaving it out changes nothing.

What source image size to start with

Start with a square source of at least 512 by 512 pixels, the size of the largest icon in the set. Bigger is fine: every file is a reduction, and reductions look sharp. Our recommended input is a square PNG, JPG, WebP or SVG of 512 pixels or more.

Some source-size realities, with what our tool does in each case:

To see how a mark looks at the small sizes before committing to it, try one of the free favicon packs: each pack folder is a complete set at every size in the table above, so you can install one and look at the real files.

How to check your favicon sizes

To check your favicon sizes, open each file and read its dimensions, and open favicon.ico to confirm it holds its layers. Then check the wiring: every file should be reachable from your page.

• Each PNG linked in your head should have a sizes attribute that matches its real pixel size.
• The manifest's sizes values should match the real files, written as 192x192 and 512x512.
• /favicon.ico should load from the root of your domain.
• Google asks that the icon and the home page are crawlable, so make sure robots.txt does not block either.

When you generate through our favicon API, the response lists every file with its measured width, height and, for the ICO, layer count, which makes this check scriptable.

Putting the sizes on your site

Once you have the files, upload them to the root of your site and paste the head snippet into every page. The step-by-step version, including what to do when the new icon does not appear, is in our guide on how to add a favicon in HTML. If you are not sure why there are several files at all, read what a favicon is first.

The short answer

The right favicon size is a set: a favicon.ico with 16, 32 and 48 pixel layers, 16 and 32 pixel PNGs, a 180 pixel apple touch icon, 192 and 512 pixel manifest icons, and a 512 pixel maskable icon with the artwork in the central 80 percent. All square, all made from one source of 512 pixels or larger. The free favicon maker produces exactly that set from one upload, measures every file it hands back, and gives you the head snippet to paste.