Why one file was never enough
The favicon began as favicon.ico in Internet Explorer 5, in a Windows icon container format that can hold several resolutions in one file. That was a sensible design, and it is why ICO persists despite being unusual in every other respect.
The requirement expanded because the contexts multiplied. A browser tab needs about 16 pixels. A bookmark bar and a pinned tab want more. iOS wants a 180-pixel icon for the home screen. Android and installed web apps want 192 and 512 pixel icons, and want to crop them into whatever shape the launcher uses. A search result may show your icon at 48 pixels.
These are not the same image scaled. A logo that reads at 512 pixels frequently turns to porridge at 16, which is why serious favicon sets contain a simplified mark for the small sizes and the full logo for the large ones.
The set that actually matters now
For a site starting today, the following covers effectively all real traffic. Everything else on the traditional thirty-file list is for browsers and devices with negligible share.
An ICO at the site root remains worth including even though PNG is universally supported, because a surprising amount of software — feed readers, link previewers, older enterprise browsers — still requests /favicon.ico by path without reading your HTML at all. It is 15 KB of insurance.
An SVG favicon is the modern addition and the most useful one, because it is resolution-independent and can respond to dark mode. Browsers that support it prefer it; those that do not fall back to the PNGs.
- favicon.ico — 16 and 32 px inside one file, at the site root.
- favicon.svg — scalable, and can adapt to dark mode.
- favicon-96x96.png — search results and general fallback.
- apple-touch-icon.png — 180x180, for iOS home screens.
- icon-192.png and icon-512.png — referenced from the web manifest.
- A 512x512 maskable icon — see below; this is the one everyone misses.
Maskable icons, and why installed apps look wrong without them
Android launchers crop app icons into a shape of the device's choosing — a circle, a squircle, a rounded square. If your icon is a normal square PNG, the launcher crops it, and the corners of your logo are cut off. If the logo fills the square, the crop removes a visible slice of it.
The fix is a separate icon declared with `"purpose": "maskable"` in the manifest. A maskable icon is designed with a safe zone: all essential content must sit inside a circle covering the central 80% of the canvas, with the outer 10% on each side treated as expendable bleed that the crop may remove. The background must extend to the full canvas, so no shape of crop ever exposes an empty corner.
This means a maskable icon is not the same file as your normal icon with a different label. It is the same logo, smaller within its canvas, on a filled background. Declaring a normal icon as maskable produces exactly the clipped result the mechanism exists to prevent.
Dark mode, and the disappearing black logo
Browser tabs are dark in dark mode, and a favicon that is black line art on transparency becomes invisible against them. This is common and easy to miss, because developers who work in dark mode look at their own favicon all day and stop seeing that it is a faint smudge.
An SVG favicon can solve this directly, because SVG can carry a media query. A `prefers-color-scheme` rule inside the SVG lets the same file draw dark strokes on light backgrounds and light strokes on dark ones. No other favicon format can do this.
If you cannot use SVG, the robust alternative is to give the icon its own background rather than relying on transparency — a coloured rounded square with the mark reversed out of it reads on any tab colour. Most well-known sites do exactly this, which is why so many favicons are a letter on a solid block.
The HTML, and the parts that are optional
The declarations are short. A link for the SVG, one for the ICO as fallback, one for the Apple touch icon, and one for the manifest — the manifest then carries the PWA icons rather than the HTML doing it.
Two long-standing recommendations can now be dropped. The `msapplication-*` meta tags for Windows tiles refer to a Start menu feature that no longer exists. And the long ladder of `apple-touch-icon-76x76`, `-120x120` and so on is unnecessary: iOS has scaled a single 180-pixel icon down for years.
One detail that still bites: browsers cache favicons aggressively and often ignore normal cache headers, so a changed favicon can appear stale for a long time. Changing the filename is more reliable than waiting.
- <link rel="icon" href="/favicon.svg" type="image/svg+xml">
- <link rel="icon" href="/favicon.ico" sizes="32x32">
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- <link rel="manifest" href="/site.webmanifest">
Designing a mark that survives 16 pixels
At 16 pixels you have 256 pixels in total to work with, and after antialiasing perhaps a dozen meaningful shapes. Almost nothing survives that intact.
Words never do — a company name in a favicon is a grey smear. Use one letter, or a symbol. Thin strokes disappear, so weight lines far more heavily than looks right at full size. Detail must be removed rather than shrunk: the small favicon should be a deliberately simplified drawing, not the logo scaled down. And test on both a white and a dark tab strip, at actual size, on a real screen rather than zoomed in your editor.
Our favicon generator produces the full set from a single source image, including the maskable variant and the manifest.