What Size Should a Favicon Be?
Choosing the correct favicon size is essential for proper display across browsers, devices and platforms.
This guide explains recommended favicon sizes and when to use each format.
All Favicon Sizes at a Glance
This table summarizes every favicon size you should ship with your website.
| Size | Format | Purpose |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab |
| 32×32 | favicon-32x32.png | Taskbar |
| 48×48 | favicon-48x48.png | Desktop shortcut |
| 180×180 | apple-touch-icon.png | iOS home screen |
| 192×192 | android-chrome-192x192.png | Android / PWA |
| 512×512 | android-chrome-512x512.png | PWA install & splash |
| Any | favicon.svg | Modern browsers, scalable |
| Multi-size | favicon.ico | Legacy browser support |
Quick Answer
Short answer:
The recommended favicon sizes are 16×16, 32×32, and 48×48 for browsers, 180×180 for Apple devices, and 192×192 and 512×512 for Android and PWA apps.
Browser Favicon Sizes
Favicons used in desktop and mobile browsers should include multiple sizes to ensure compatibility.
| Size | File | Usage |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tabs |
| 32×32 | favicon-32x32.png | Taskbars & UI |
| 48×48 | favicon-48x48.png | Desktop shortcuts |
| Multi-size | favicon.ico | Legacy browser support |
Apple Touch Icon Sizes
Apple devices require larger icons for home screen shortcuts.
| Size | File | Device |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Android & PWA Icon Sizes
Progressive Web Apps and Android Chrome require specific icon dimensions.
| Size | File | Usage |
|---|---|---|
| 192×192 | android-chrome-192x192.png | Home screen icon |
| 512×512 | android-chrome-512x512.png | App launcher & splash |
These sizes are required to pass PWA installation checks.
SVG Favicon Size
SVG favicons are vector-based and do not require a fixed size.
Recommended:
- Use a square viewBox (e.g. 0 0 100 100)
- Keep artwork centered
- Avoid excessive details
SVG favicons scale perfectly on high-DPI and zoomed displays.
Which Favicon Formats Should I Use?
| Format | When to Use |
|---|---|
| PNG | Most common, broad compatibility |
| ICO | Legacy Windows & browsers |
| SVG | Modern browsers, scalable |
Best practice: Use PNG + ICO + SVG together.
favicon.ico vs PNG vs SVG
Each favicon format has a different job. Here is how to choose.
| Format | Best for |
|---|---|
| favicon.ico | Maximum compatibility with older browsers and Windows. Bundles 16×16, 32×32 and 48×48 in one file. |
| PNG | The modern default for tabs and bookmarks. Crisp on high-DPI screens and easy to create. |
| SVG | Vector favicon that scales to any size, supports dark mode and is future-proof. |
Recommendation: Ship all three: favicon.ico for legacy support, PNG for everyday tabs, and SVG for high-DPI screens and dark mode.
Favicon Sizes by Platform
One-line summary of what each platform expects.
- Chrome: 16×16 and 32×32 PNG; falls back to favicon.ico
- Firefox: 16×16 PNG or ICO
- Safari: 16×16 PNG; pinned tabs use favicon.svg
- Edge: 16×16, 32×32 and 48×48 PNG or ICO
- Windows: favicon.ico with 16×16, 32×32 and 48×48; taskbar uses 32×32
- Android: 192×192 and 512×512 PNG via the web manifest
- iOS: apple-touch-icon.png at 180×180 (152×152 iPad, 167×167 iPad Pro)
- PWA: 192×192 and 512×512 PNG plus a site.webmanifest
Recommended HTML Markup
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Common Favicon Mistakes
- Using only one favicon size
- Forgetting Apple Touch Icons
- Missing PWA icons
- Using low-resolution source images
Generate All Favicon Sizes Automatically
Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.
Internal Links
FAQ
What is the standard favicon size?
Browser favicons are typically 16×16 and 32×32. Apple devices use 180×180, and Android/PWA use 192×192 and 512×512.
Do I need multiple favicon sizes?
Yes. Different browsers and devices request different sizes, so providing a full set (ICO, PNG, SVG, Apple Touch and Android icons) ensures your site looks correct everywhere.
What is a maskable icon size?
Maskable icons for PWA install prompts should be 512×512 with a safe zone: keep the important artwork inside the central 80% circle so it is not cropped.
Should I use favicon.ico or PNG?
Use both. Browsers prefer PNG today, but favicon.ico is still the most compatible fallback for Windows and older browsers.
About This Tool
This page provides original, human-reviewed information about favicon sizes and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.