Favicon Sizes Guide: Every Size You Need in 2026
By AZ Utils Editorial · · 7 min read
One favicon size is no longer enough. Between retina browser tabs, iOS home screens and Android PWAs, modern sites need a small family of icons — and using the wrong sizes leaves you with blurry tabs or low-quality home-screen icons. This favicon sizes guide lists exactly which sizes and files you need in 2026, what each is for, and how to generate them all from one image.
It's for developers, designers and site owners who want their favicon to look sharp everywhere.
Key Concepts: Why Multiple Sizes
Different contexts render the icon at different resolutions. A browser tab needs 16–32px; an iOS home screen needs 180px; an Android/PWA icon needs up to 512px. Supplying each size means the device always has a crisp, correctly scaled image instead of an awkwardly resized one.
In short: A complete favicon set includes a multi-size favicon.ico, 16×16 and 32×32 PNGs for tabs, a 180×180 apple-touch-icon for iOS, and 192×192 and 512×512 PNGs for Android/PWAs — all best generated from a 512×512 source.
The Favicon Sizes You Need
| File / size | Purpose |
|---|---|
| favicon.ico (16/32/48) | Legacy browsers & address bar (multi-size ICO) |
| 16×16 PNG | Standard browser tab |
| 32×32 PNG | Retina/high-DPI tabs, taskbar |
| 180×180 PNG | apple-touch-icon (iOS home screen) |
| 192×192 PNG | Android home screen (via manifest) |
| 512×512 PNG | Android splash / PWA install (via manifest) |
| SVG (optional) | Scalable, crisp at any size in modern browsers |
Start From the Right Source
Always begin with a square 512×512 px image (PNG with transparency). A generator downsamples it to every smaller size cleanly — far better than scaling up a tiny original, which produces blur.
Step-by-Step: Generating Every Size
- Prepare a 512×512 square source image.
- Upload it to the Favicon Generator.
- Generate the full set (ICO + all PNG sizes).
- Download and reference them in your HTML and manifest — see How to Add Favicon in HTML.
Try Our Free Favicon Generator
Generate every size from one image with our free Favicon Generator.
- ✅ ICO + 16, 32, 180, 192, 512 PNGs
- ✅ Small-size preview
- ✅ Ready-to-paste HTML
- ✅ Free, in your browser
👉 Generate all favicon sizes →
Real-World Examples
Example 1 — Retina tab
Without a 32×32, high-DPI screens upscale the 16px icon and it looks fuzzy; adding 32×32 fixes it.
Example 2 — iOS home screen
Without a 180px apple-touch-icon, iOS substitutes a low-quality screenshot when a user saves the site.
Example 3 — Android PWA
The 192px and 512px icons in the manifest give a clean app icon and splash screen on install.
Common Mistakes to Avoid
- Shipping only a 16×16 — blurry on modern displays.
- Scaling up a small source instead of starting at 512px.
- Skipping the apple-touch-icon or manifest icons.
- Using a non-square source.
Best Practices
- Start at 512×512 and downsample.
- Include every size in the table above.
- Test on retina, iOS and Android.
- Keep the design legible at 16px — see Favicon Best Practices.
Frequently Asked Questions
What favicon sizes do I need?
A multi-size favicon.ico (16/32/48), 16x16 and 32x32 PNGs for tabs, a 180x180 apple-touch-icon for iOS, and 192x192 and 512x512 PNGs for Android and PWAs.
What is the best source size for a favicon?
Start from a square 512x512 pixel image so every smaller size can be generated cleanly without upscaling blur.
Why do I need a 32x32 as well as 16x16?
High-DPI (retina) displays render tabs at higher resolution, so a 32x32 keeps the icon sharp where a 16x16 alone would look fuzzy.
What size is the apple-touch-icon?
180x180 pixels, used when someone adds your site to an iOS home screen.
What are the 192 and 512 sizes for?
They are referenced in the web app manifest for Android home-screen icons and PWA install/splash screens.
Conclusion
A sharp favicon everywhere means supplying the right sizes: ICO and small PNGs for tabs, 180px for iOS, and 192/512px for Android — all from a 512px square source. Generate the complete set in one step and your icon looks crisp on every device.
👉 Generate every favicon size now →
Related Resources
- Favicon Generator: Complete Guide — the full how-to
- What Is a Favicon — the basics
- How to Add Favicon in HTML — the markup
- Favicon Best Practices — design & technical tips
