Favicon Sizes — Every Size You Need in 2025
Modern browsers support multiple favicon formats and sizes. Getting them right ensures your site icon looks sharp on every browser tab, bookmark bar, and mobile home screen. This guide covers every size you should include.
Required Sizes
| Size | Format | Purpose |
|---|---|---|
| 16x16 | PNG | Browser tab (standard displays) |
| 32x32 | PNG | Browser tab (retina displays) |
| 48x48 | ICO | Windows taskbar shortcut |
| 180x180 | PNG | Apple Touch Icon |
| any | SVG | Scalable vector favicon |
| 192x192 | PNG | Android Chrome |
| 512x512 | PNG | PWA splash screen |
Best Practices
- 1Include both ICO (48px multi-res) and PNG (32px) for maximum browser compatibility.
- 2Add an SVG favicon with a <link rel="icon" type="image/svg+xml"> for modern browsers — it scales perfectly.
- 3Always set the apple-touch-icon meta tag even if you have a web manifest — iOS Safari reads it independently.
- 4Use a transparent background for your PNG favicons so they work on any browser theme.
Common Mistakes
- Only including a single 16x16 ICO file — retina displays will render it blurry.
- Forgetting the apple-touch-icon 180x180 — iOS Safari will auto-generate a low-quality screenshot instead.
- Using a JPEG as a favicon — favicons require PNG or ICO for transparency support.
- Not testing favicons in dark mode — some browsers invert or dim favicons on dark tabs.
Generate All Favicon Sizes Instantly
Upload one image and get every favicon size you need — ICO, PNG, SVG, and apple-touch-icon — in a single download.
Open GeneratorFrequently Asked Questions
What is the best favicon size?
32x32 PNG is the most widely used size. However, you should include multiple sizes (16x16, 32x32, 48x48 ICO, 180x180 apple-touch-icon, and an SVG) for the best cross-browser experience.
Do I need an ICO file for favicons?
ICO files are still recommended for legacy browser support and Windows taskbar shortcuts. A 48x48 multi-resolution ICO covers all legacy use cases.
What format should my favicon be?
Use PNG for fixed sizes, SVG for a scalable modern favicon, and ICO for legacy support. Avoid JPEG — favicons need transparency.
How do I add a favicon to my website?
Add <link rel="icon" href="/favicon.ico"> and <link rel="icon" type="image/svg+xml" href="/icon.svg"> in your HTML <head>. For Apple devices, add <link rel="apple-touch-icon" href="/apple-touch-icon.png">.