Favicon sizes: formats and uses

Each row corresponds to a documented use in the proposed package. The table favors a small interoperable set over a collection of historical variants.

ICO is a container format: a single file can hold several images and the browser picks the one matching its display. That is exactly what you want, because the requested size changes with the context.

16×16 serves a tab on a standard screen. 32×32 provides a variant for high-density displays and other browser interfaces. 48×48 completes the container and also follows the multiple-of-48 rule Google documents for search-result favicons.

Shipping an .ico that only contains 16×16 is the single most common mistake: on a Retina screen your icon gets upscaled and looks permanently blurry.

iOS does not read the web manifest for the home screen icon: it looks for an apple-touch-icon tag. A single size is enough, 180×180, which covers every recent iPhone and iPad. The system scales it down itself for older devices.

Android goes through the web manifest instead. Two entries are enough: 192×192 for the home screen icon and 512×512 for the splash screen when the site is installed as an app. The 512 version should be declared with purpose "maskable", meaning it is drawn to survive being cropped into a circle or a rounded square.

For a maskable icon, keep the essentials inside the central 80%. Anything outside can be cropped depending on the phone manufacturer.

The best starting point is an SVG: it scales losslessly to every size above. Failing that, use a square PNG of at least 512×512 pixels, so that even the Android splash icon is produced by downscaling and never by upscaling.

A horizontal logo with text does not work at 16×16: at that size a word turns into three pixels of mush. Extract the symbol, or start from one or two letters on a contrasting background.

Finally, check the contrast on both light and dark backgrounds: a black logo vanishes in a dark-themed tab. That is exactly what the dark variant of the SVG favicon is for.

Older generators still emit files for historical integrations, such as Windows tiles using mstile-150x150.png and browserconfig.xml. Add them only when your support matrix explicitly targets those interfaces.

The long apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 and 152x152 series dates from a time when iOS could not resize. One 180×180 image replaces all of them.

Removing declarations with no use simplifies your repository and HTML. Check your own target browsers and platforms before removing an existing integration.