Complete Favicon Size Guide 2024
Everything you need to know about favicon sizes for all platforms, browsers, and devices. From the classic 16x16 to modern high-resolution icons.
Quick Reference Table
| Size | Platform | Usage | Priority |
|---|---|---|---|
| 16x16 | All Browsers | Classic favicon, browser tabs | Essential |
| 32x32 | All Browsers | Modern browsers, bookmarks bar | Essential |
| 180x180 | iOS Safari | Apple Touch Icon, home screen | Essential |
| 192x192 | Android Chrome | PWA icon, home screen | Important |
| 512x512 | Android Chrome | PWA splash screen | Important |
| 48x48 | Windows | Site icon in Windows | Recommended |
| 96x96 | Google TV | Google TV icon | Optional |
| 144x144 | Windows | Microsoft tiles | Optional |
Browser Favicons
Desktop Browsers
16x16 pixels
Classic size: Original favicon size, still used in browser tabs when screen space is limited.
32x32 pixels
Modern standard: Used in most modern browsers for tabs, bookmarks, and address bar.
48x48 pixels
High-DPI displays: Better quality on Retina and high-resolution displays.
Apple Touch Icons
iOS Devices
Apple devices use high-resolution icons for home screen shortcuts and other contexts. The primary size is 180x180 pixels, but providing multiple sizes ensures compatibility across all Apple devices and contexts.
| Size | Device/Context | Filename |
|---|---|---|
| 180x180 | iPhone, iPad (Modern) | apple-touch-icon.png |
| 152x152 | iPad Retina | apple-touch-icon-152x152.png |
| 144x144 | iPad Retina (older) | apple-touch-icon-144x144.png |
| 120x120 | iPhone Retina | apple-touch-icon-120x120.png |
| 114x114 | iPhone 4/4S | apple-touch-icon-114x114.png |
| 76x76 | iPad (non-Retina) | apple-touch-icon-76x76.png |
| 72x72 | iPad (older) | apple-touch-icon-72x72.png |
| 60x60 | iPhone (non-Retina) | apple-touch-icon-60x60.png |
| 57x57 | iPhone (original) | apple-touch-icon-57x57.png |
Android & PWA Icons
Progressive Web Apps
Android and PWA icons are defined in the manifest.json file. Modern Android
supports adaptive icons that work with various launcher styles.
Standard Icons
- 36x36 0.75x
- 48x48 1x
- 72x72 1.5x
- 96x96 2x
- 144x144 3x
- 192x192 4x - Essential
- 512x512 High-res - Essential
Maskable Icons
Maskable icons are designed with a safe zone to work with adaptive icon shapes on Android.
- Size: 512x512 pixels
- Safe Zone: 80% center (40px margin)
- Purpose: Adaptive Android launchers
- Format: PNG with transparency
Microsoft Tiles
Windows Start Menu
Windows uses tile icons for pinned websites in the Start Menu. These are defined in
browserconfig.xml.
| Size | Tile Type | Usage |
|---|---|---|
| 70x70 | Small | Small tile in Start Menu |
| 150x150 | Medium | Default tile size |
| 310x310 | Large | Large tile (square) |
| 310x150 | Wide | Wide rectangular tile |
Recommended Source Image Size
Best Practice
Start with a source image of at least 512x512 pixels (preferably 1024x1024) with a transparent background in PNG format.
This allows you to scale down to all required sizes while maintaining quality. Scaling up from a small image results in pixelation and poor quality.
Minimum Essential Set
If you want to cover the basics with minimal files, here's the absolute minimum set you should implement:
- favicon.ico - 16x16, 32x32, 48x48 (multi-size)
- favicon-16x16.png - Small displays
- favicon-32x32.png - Modern browsers
- favicon-96x96.png - High DPI displays
- favicon-512x512.png - Ultra high resolution
- apple-touch-icon.png - 180x180 for iOS
- android-chrome-192x192.png - Android/PWA
- android-chrome-512x512.png - PWA splash
- favicon.svg - Scalable vector
- site.webmanifest - PWA configuration
- browserconfig.xml - Windows tiles
- maskable-icon-512x512.png - Adaptive Android
Generate All Sizes Automatically
Our favicon generator creates all necessary sizes automatically from a single source image
Generate All Favicon Sizes Now