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.
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.
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
Upload Your Image and Generate All Favicon Sizes Now