Favicon and app icon sizes: the list that is actually needed

Favicon generators used to emit forty files and a page of HTML. Almost none of it is needed now. This is the short list, what each entry is actually for, and the two design problems that cause most of the bad results.

The set worth producing

That is it for a website. Six files, five of which come from the same drawing in one pass, and the sixth of which is a container holding two of the others.

Two optional extras earn their place on some sites. A maskable 512 pixel icon, which is the mark on a solid background with generous padding so Android can crop it to whatever shape the device uses without clipping. And a 1024 pixel version, which several app store and listing processes ask for.

Everything else that old generators produced, the 70 by 70 and 150 by 150 Windows tiles, the dozen apple-touch-icon-precomposed variants, the Android sizes from 36 to 144, is legacy. Modern browsers scale from what you give them.

The HTML

Four lines in the head, and the manifest.

The SVG icon is declared with a link element of rel “icon” and type “image/svg+xml”. The PNG fallback is another rel “icon” with its sizes attribute set. The iOS icon is rel “apple-touch-icon”. The manifest is rel “manifest” pointing at a small JSON file that lists the 192 and 512 pixel icons with their sizes and types.

Browsers pick the best one they understand and ignore the rest, which is why the order matters less than people think. Putting favicon.ico at the site root covers anything that looks for it without reading your HTML at all.

The two design problems

Too much detail. A 16 pixel square is 256 pixels in total. A logo with a wordmark, thin strokes or a gradient becomes an indistinct smudge, and no amount of rendering care fixes it, because there is nowhere to put the information.

The answer is a different drawing for small sizes: the symbol without the wordmark, or a single letter, with thick strokes and strong contrast. Most well known sites do exactly this and nobody notices, because at 16 pixels nobody could have read the wordmark anyway.

Transparency where it is not wanted. A transparent favicon is right, because a browser tab can be light or dark. A transparent apple-touch-icon is wrong: iOS places it on a rounded square and any transparency renders as black, which is why so many home screen icons are a dark square with a logo floating in it. Give the iOS icon and the maskable Android icon a solid background.

Dark mode

An SVG favicon can respond to the browser’s colour scheme, because CSS inside the SVG applies. A prefers-color-scheme media query in a style element can switch a dark mark to a light one, so a logo that disappears against a dark tab bar stops doing so.

This only works for the SVG favicon, not for the PNG fallbacks, and not for the home screen icons, which sit on the user’s wallpaper rather than on a themed surface. The usual compromise is to design the mark so it works on both, typically by giving it its own background or enough contrast either way.

Where else the same icon turns up

A favicon is not only a browser tab, which is why the 32 and 180 pixel versions earn their keep.

Bookmarks and history. Most browsers show the icon in the bookmarks bar, in the history list and in the address bar suggestions, usually at 16 or 32 depending on the display.

Browser tab groups and pinned tabs. A pinned tab in most browsers is nothing but the icon, so a mark that is unrecognisable at small sizes leaves the user with an anonymous square.

Search results. Google shows a site icon next to mobile results, which it fetches from your declared favicon and prefers at a minimum of 48 pixels and a multiple of 48. A 32 pixel PNG alone can mean no icon appears there, which is a small but real reason to include a larger one or an SVG.

Link previews in chat apps. Slack, Teams, Discord and most messengers show the icon alongside an unfurled link.

Home screens. Both iOS and Android use the icon when somebody saves the site, and Android uses the 512 pixel version for the splash screen while the page loads.

Progressive web app install prompts, which take theirs from the manifest.

None of those need extra files beyond the set above. They are worth knowing because they explain why a good icon is worth three attempts: it appears in far more places than the tab it was designed for, and in most of them it is competing with real app icons drawn by people who took it seriously.

Producing the set

Start from a vector. Every size is then a render rather than a resize, and nothing is ever enlarged. If all you have is a bitmap, the order of operations matters: enlarge with a classical filter rather than a photographic model, then trace, as enlarging a logo without blur describes.

Render each size individually rather than making the largest and shrinking it in an image editor. Shrinking is usually fine, and rendering each one lets the antialiasing be computed for that exact size, which is visibly better at 16 and 32 pixels where every pixel counts.

For the ICO, the file is a container holding several PNGs, one per size. PNG to ICO makes one from a picture, and it stores 16, 32, 48 and 256 inside.

For the rest, an SVG to PNG converter that will do a set of sizes in one pass saves the tedious part. The SVG to PNG tool here has the favicon, home screen and manifest sizes as tick boxes, renders every drawing you dropped at every size you ticked, and hands back a ZIP named by size.

Checking a live site

Once the files are up, the question is whether the page is declaring them properly, which is a different thing from having made them. getReport’s favicon and touch icons covers the declarations, and its SEO audit reports on a live page whether a favicon and an apple-touch-icon are both there, which catches the commonest version of this: the files exist, and nothing in the head points at them.

Caching, and why your new favicon will not appear

Every few months somebody replaces a favicon, reloads, and sees the old one. This is not a mistake on their part.

Browsers cache favicons unusually aggressively, in a separate store from ordinary page resources, and a normal hard reload often does not clear it. The icon can survive a cache clear, a restart and a change of the file on the server.

The reliable ways round it, in order of how little they annoy you: open the icon file directly in a tab and reload that, which refreshes the entry; add a query string to the link in your HTML, such as a version number, which makes it a different URL as far as the cache is concerned; or change the file name itself and update the link. The query string is the usual answer and costs nothing.

It is worth doing this deliberately rather than concluding that the icon is broken, because the same caching means that once the new one is picked up, it stays picked up.

A checklist before you ship

• The 16 pixel version is recognisable at reading distance.
• The apple-touch-icon has a solid background, not transparency.
• The manifest lists 192 and 512 with the right types.
• favicon.ico exists at the site root.
• The SVG favicon, if you have one, looks right on both a light and a dark tab bar.
• You have looked at all of it on an actual phone, not only in a browser.

That last one catches more problems than the other five together. SVG or PNG covers which format to reach for elsewhere on the site, and the same rule applies here: vector as the master, PNG for the destinations that need pixels.

The steps, in short

1. Start from a vector. Draw or obtain the mark as an SVG. Every size comes from it, so there is nothing to enlarge and nothing to lose.
2. Make a simplified version for small sizes. At 16 and 32 pixels a detailed logo turns to mush. A simplified mark, often just the symbol without the wordmark, reads far better.
3. Export the set. 32, 180, 192 and 512 pixel PNGs, plus the SVG itself. Keep the transparency unless the platform wants a solid background.
4. Declare them in the HTML head. A link for the SVG icon, one for the PNG fallback, one apple-touch-icon, and a manifest link. Four lines covers it.
5. Check on a phone. Add the site to an iPhone and an Android home screen and look at the result. This is where a transparent background or a too detailed mark shows up.

Questions

What size should a favicon be?

Provide an SVG for browsers that take one, a 32 pixel PNG as the fallback, and optionally an ICO containing 16 and 32 for older browsers. The 16 pixel version still matters because it is what appears in a browser tab at standard density.

Do I still need an .ico file?

Only for older browsers and for a few surfaces that look for favicon.ico at the site root by habit. It costs a couple of kilobytes and removes a category of edge case, so most sites still include one.

What is apple-touch-icon and what size is it?

The icon iOS uses when somebody adds your site to their home screen. 180 by 180 pixels is the size to supply. It should have a solid background, because iOS puts it on a rounded square and transparency shows as black.

What sizes does a web app manifest need?

192 and 512 pixel PNGs cover it. Include a maskable version of the 512 if you want Android to crop it to the device's icon shape without cutting off your mark.

Can a favicon be an SVG?

Yes, and it is the best option where it is supported, because one file serves every size and can follow the dark theme with a CSS media query inside it. Provide a PNG fallback for browsers that do not take one.

Why does my favicon look like a blob?

It is too detailed for 16 or 32 pixels. A full logo with a wordmark simply cannot survive at that size. Make a simplified version: one letter, one symbol, strong contrast, and no thin lines.