What Size Should a Favicon Be?

iOS does not use your icon tags at all

This is the one that catches people, and it is documented rather than folklore. MDN states plainly that Apple's iOS does not use this link type, nor the sizes attribute, to choose an icon for a Web Clip, and uses the non-standard apple-touch-icon instead.

So the careful set of rel="icon" tags you wrote, with correct sizes on each, does nothing whatsoever when somebody adds your page to an iPhone home screen. If apple-touch-icon.png is missing, iOS falls back to a screenshot of the page, which looks like a mistake because it is one.

It is one line and one file. There is no size negotiation and no sizes attribute involved — the name is the contract, 180×180 is the size to ship, and it goes at your site root like the rest.

What Google actually asks for

Google's own documentation for the favicon shown beside your result in search sets a much lower bar than people expect, and a different one. The icon must be square, 1:1, and at least 8×8 pixels — and Google then recommends going larger than 48×48 so it holds up on different surfaces. Supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF.

Read that against the query that brings people here. 32×32 is above Google's minimum and below its recommendation, which is exactly the wrong place to aim if search appearance is what you care about. The 48 px frame inside the .ico, and the 192 and 512 px PNGs, are the ones doing that work.

Google also asks that the icon be declared with a link tag in the head of your home page, and warns that recrawling it can take anywhere from several days to several weeks. If you have just changed your icon and search still shows the old one, that is the expected behaviour rather than a broken file.

Order matters: the last equally-good icon wins

When several icons are declared, the browser reads the media, type and sizes attributes to pick the most appropriate one — and MDN is explicit about the tie-break: if several are equally appropriate, the last one is used.

That has a practical consequence worth knowing before you rearrange the tags the generator gives you. Two icon tags that a browser considers equally suitable are resolved by document order, so pasting a new line at the bottom of your head can silently change which icon is displayed while every file on the server stays exactly as it was.

The safe habit is to declare a size on every raster icon so no two are ever ambiguous, which is what the generated snippet does. If you later add an SVG, give it a type rather than relying on where you put it.

Getting the source right, and what a small one costs

Start from a square image at 512 px or larger. Every file in the set is produced by drawing your source down to size, so the 512 px PNG is the one that exposes a source that was too small — it will look soft, and the tool warns you when your source forces it.

Detail is the other thing that does not survive. A logo with a tagline, a thin outline or fine internal lines turns to mush at 16 px, where you have 256 pixels in total to work with. Icons that read well small are usually a single shape with one or two colours, which often means a cropped or simplified version of the logo rather than the logo itself.

If your source is not square, the generator centre-crops it and tells you it did. When the centre is not the part you want, crop it yourself first and feed in the square you actually chose.

If you need one .ico with a different set of sizes inside it — 24, 64, 128 or 256 — rather than the standard web set, the ICO generator builds a single container from the sizes you tick.

Frequently asked questions

Is 32×32 enough on its own?

No. It leaves iOS home screens with no icon, gives Android and installable web apps nothing to use, and sits below the size Google recommends for search results. It is one useful frame out of the set rather than a complete answer.

Do I still need favicon.ico in 2026?

Yes, and cheaply. A page serving no link tags at all still produced a request for /favicon.ico in a real browser test. Shipping the file costs a few kilobytes and answers a request that happens regardless.

Why does my icon not appear on an iPhone home screen?

Because iOS ignores rel="icon" and the sizes attribute entirely, as MDN documents, and looks for the non-standard apple-touch-icon instead. Without a 180 px apple-touch-icon.png, iOS uses a screenshot of the page.

What size does Google want for the favicon in search results?

Google requires a square icon of at least 8×8 pixels and recommends larger than 48×48. It accepts BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, and asks that the icon be declared with a link tag on your home page.

Should I use an SVG favicon instead?

As an addition, not a replacement. Support is around 90% globally, and the gap is Safari, which did not support SVG favicons until version 26.0 on macOS and iOS. Older Safari needs the .ico or a PNG.

Is my logo uploaded anywhere?

No. Every size, and the .ico container itself, is built by JavaScript in this page using your browser's own image APIs. The logo never leaves your device.