Favicon Best Practices: Sizes, Formats, and Common Mistakes
A favicon is one of the smallest assets on a website and one of the most frequently gotten wrong — not because it's technically difficult, but because the requirements are scattered across browser tabs, bookmarks, and home-screen icons, each with slightly different expectations.
Why favicons matter more than their size suggests
A favicon is often the first thing a person sees when scanning several open browser tabs, and a missing or generic favicon subtly signals an unfinished or untrustworthy site before a single word of content is read.
The sizes that actually get used
| Size | Where it's used |
|---|---|
| 16×16, 32×32 | Browser tabs and bookmarks |
| 180×180 | Apple touch icon (iOS home screen) |
| 192×192, 512×512 | Android home screen and PWA manifest icons |
Providing just one size and letting browsers scale it usually looks fine small but poor at larger sizes — a 16×16 icon stretched to 512×512 looks blurry and unpolished on an Android home screen.
Common favicon mistakes
- Only providing a .ico file. Modern devices also expect PNG-format icons at specific sizes for home screens and app manifests — a single .ico alone doesn't cover every context.
- Overly detailed designs. At 16×16 pixels, fine details disappear entirely — a simple, high-contrast mark reads far better than an intricate logo.
- Forgetting the manifest.json reference. PWA-capable sites need icons declared in the web app manifest, not just linked in the HTML head, for home-screen installs to display correctly.
A simple, reliable setup
A multi-resolution .ico for browser tabs, a 180×180 PNG for the Apple touch icon, and 192×192/512×512 PNGs referenced in manifest.json covers the overwhelming majority of real-world display contexts without extra complexity.
Frequently asked questions
A multi-size .ico file linked in the HTML head covers most browsers; adding a 180×180 apple-touch-icon and 192/512px PNGs in a manifest.json covers mobile home screens and PWA installation as well.
This usually happens when only a small favicon (like 16×16 or 32×32) is provided and the device scales it up — providing a properly sized larger icon (like 192×192) fixes this.