| Size | Purpose |
|---|
| 16×16 PNG/ICO | Browser tab |
| 32×32 PNG/ICO | Bookmark, dock |
| 48×48 PNG/ICO | Windows taskbar |
| 64×64 PNG | High-DPI bookmark |
| 96×96 PNG | Google TV |
| 144×144 PNG | Microsoft Tile |
| 152×152 PNG | iOS legacy iPad |
| 167×167 PNG | iPad Pro |
| 180×180 PNG | iPhone Touch Icon |
| 192×192 PNG | Android, PWA |
| 270×270 PNG | Microsoft larger Tile |
| 512×512 PNG | PWA splash |
For the legacy favicon.ico: package 16, 32, 48 PNGs into a multi-size ICO file.
For a favicon to work at all sizes:
- Solid background: avoid transparent backgrounds for non-PWA contexts
- Simple shape: legible at 16×16 (5×5 pixel resolution effectively)
- High contrast: visible on light and dark backgrounds
- No text: can't read text at 16×16
- Square aspect: all favicon contexts are square
For most brands: design at 256×256 or 512×512, then scale down. Verify legibility at smallest size.
| Tool | Cost | Output |
|---|
| favicon.io | Free | All sizes + manifest |
| RealFaviconGenerator.net | Free | All sizes + tested |
| Adobe Photoshop | Paid | Manual export per size |
| Sketch | Paid | Multi-size export |
| Figma | Free | Plugin-assisted multi-size |
| ImageMagick | Free (CLI) | All sizes scriptable |
For most teams: RealFaviconGenerator.net is the practical choice. Tests against actual browsers and OSes.
For programmatic generation:
# ImageMagick: generate all sizes from a 512×512 source
convert source.png -resize 16x16 favicon-16.png
convert source.png -resize 32x32 favicon-32.png
convert source.png -resize 48x48 favicon-48.png
convert source.png -resize 192x192 android-chrome-192.png
convert source.png -resize 512x512 android-chrome-512.png
convert source.png -resize 180x180 apple-touch-icon.png
# Multi-size ICO
convert favicon-16.png favicon-32.png favicon-48.png favicon.ico
For batch processing patterns, see Batch Processing Files Guide.
The modern favicon HTML:
<!-- Standard browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<!-- Higher-resolution -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android / PWA -->
<link rel="manifest" href="/manifest.webmanifest" />
<!-- Microsoft Tile -->
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="/browserconfig.xml" />
For PWAs, include a manifest.webmanifest:
{
"name": "Your App Name",
"short_name": "AppName",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
The purpose: "maskable" icon is for adaptive icons on Android. Designed with safe-zone padding so OS can crop to circle/square/etc.
Android's adaptive icons crop to various shapes (circle, rounded square, squircle). For your icon to display correctly:
- 80% safe area in the center (the "minimum visible region")
- Outer 10% on each edge can be cropped
- Solid background (not transparent) to fill the cropping shape
Tools for testing maskable icons:
- maskable.app (online tool)
- Android Studio (preview adaptive icons)
For broader image preparation, see our image converter.
Modern browsers support SVG favicons:
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" href="/favicon.ico" />
SVG advantages:
- Single file scales to any size
- Smaller than equivalent PNG (often 1-3 KB)
- Can include media queries (different colors for light/dark mode)
SVG dark mode example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
circle { fill: #ffffff; }
}
circle { fill: #000000; }
</style>
<circle cx="16" cy="16" r="14"/>
</svg>
The favicon adapts to user's theme preference. Browser shows correct version automatically.
ICO files can contain multiple sizes in one file:
# Combine multiple PNGs into multi-size ICO
convert size16.png size32.png size48.png favicon.ico
Browsers pick the appropriate size from the multi-size ICO automatically. For broadest compatibility: include 16, 32, 48 sizes minimum.
For our image converter, ICO output is supported.
Favicon doesn't update after change: browser cache. Force refresh with Ctrl+F5 or clear browser cache. Server-side: increment query string favicon.ico?v=2.
Apple Touch Icon shows generic: missing from HTML or wrong size. Verify 180×180 exists at the specified path.
PWA icon looks bad on Android: not maskable or missing. Add purpose: "maskable" icon with safe-zone padding.
Multi-size ICO too large: each size adds bytes. Limit to 16, 32, 48 (smallest sizes most needed in legacy contexts).
SVG favicon doesn't show in older browsers: provide ICO fallback alongside SVG.
For SVG-specific context, see EPS to SVG Conversion.
Both. SVG for modern browsers (small file, scalable, dark-mode aware). PNG/ICO for legacy compatibility.
Apple accepts multi-size ICO and PNG. The apple-touch-icon PNG is what iOS uses for "Add to Home Screen."
Yes. Google indexes favicons in search results. Missing or generic favicon hurts brand recognition.
Multi-size ICO with 16, 32, 48: ~5-10 KB. Larger sizes inflate the file with diminishing returns.
Yes since Safari 13.1. For older Safari users: provide PNG fallback.
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
Affects status bar color when site is "Added to Home Screen" on iOS. Options: default, black, black-translucent.
For modern favicon export in 2026: 12+ size variants (16-512px), SVG favicon for modern browsers, ICO for legacy. PWA manifest for app-like experiences. RealFaviconGenerator.net or ImageMagick for batch generation. Test maskable icons on Android. Our image converter handles ICO and PNG conversion.
