Why one favicon is no longer enough
A favicon used to be a single 16-pixel icon in the browser tab. It now has to work as a tab icon, a bookmark, a home-screen icon on iOS and Android, a tile in Windows, and a thumbnail in search results — each at a different size.
Supplying only a 16-pixel image means every larger context scales it up, producing a blurred, pixelated result on exactly the surfaces where your brand is most visible.
The sizes that matter
Sixteen and 32 pixels cover browser tabs and bookmarks, with 32 being what most modern browsers actually use on standard displays. The 180-pixel version is the Apple touch icon used when someone adds your site to an iPhone home screen. The 192 and 512 sizes are used by Android and by progressive web app manifests.
Generating all of them from one high-resolution source costs nothing and removes the guesswork.
Designing for 16 pixels
This is the part people get wrong. A logo that looks excellent on a business card usually becomes an unreadable smudge at 16 pixels, because there simply are not enough pixels to render fine detail, thin strokes or small text.
The favicons that work are radically simplified: a single letter, a bold symbol, or a strong shape in two or three high-contrast colours. Look at the tab bar of any browser and the icons you can identify instantly are all simple. If your full logo does not survive the reduction, design a separate mark for small sizes rather than accepting a blur.
Transparency and dark mode
A transparent background adapts to whatever surface it sits on, which is usually what you want. The complication is dark mode: a dark logo on a transparent background disappears against a dark tab bar.
Filling the background with a solid colour avoids this entirely and is the safer choice for a dark or single-colour mark. It is why so many favicons are a coloured square with a light symbol on top.
Rounded corners
iOS applies its own rounding to home screen icons regardless of what you supply, so you do not need to pre-round for that. Rounding here is useful when you want a consistent shape in browser tabs and bookmark lists, or for Android, which respects the shape you provide.
Placement
Put the files in your site root and add the link tags shown to your head section. Browsers cache favicons aggressively, so after replacing one you may need a hard refresh to see the change — this is normal and does not mean the file is wrong.
Generated in your browser
Every size is rendered locally on a canvas. Your image is never uploaded.
Frequently Asked Questions
Which favicon sizes do I actually need?
At minimum 32 for browsers and 180 for iOS home screens. Adding 16, 192 and 512 covers bookmarks, Android and progressive web apps.
Why does my logo look blurry at 16 pixels?
There are not enough pixels for fine detail or text. Effective favicons are radically simplified — a single letter or bold symbol in high contrast.
Should the background be transparent?
Transparent adapts to any surface, but a dark logo disappears in dark mode. A solid background colour is safer for dark or single-colour marks.
Do I need to round the corners for iOS?
No. iOS applies its own rounding to home screen icons. Rounding is useful for browser tabs and Android, which respect your shape.
Why has my new favicon not appeared?
Browsers cache favicons aggressively. A hard refresh usually resolves it; the file itself is almost certainly fine.