A professional favicon setup requires more than one file. Different browsers, operating systems, and contexts each expect a specific size and format. Here is the complete reference for every favicon file you need in 2025.
The complete favicon file list
| File | Size(s) | Format | Used by |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px | ICO (multi-size) | All browsers (fallback) |
| favicon-16x16.png | 16×16 px | PNG | Modern browsers (tab) |
| favicon-32x32.png | 32×32 px | PNG | Modern browsers (tab, toolbar) |
| apple-touch-icon.png | 180×180 px | PNG | iOS Safari home screen, bookmarks |
| android-chrome-192x192.png | 192×192 px | PNG | Android Chrome home screen, PWA |
| android-chrome-512x512.png | 512×512 px | PNG | PWA splash screen, Play Store |
| site.webmanifest | — | JSON | PWA install, Android Chrome |
favicon.ico — the universal fallback
favicon.ico is an ICO container that can hold multiple sizes in one file. A modern favicon.ico should include 16×16, 32×32, and 48×48 px variants. The browser picks the most appropriate size for the context (tab, taskbar pin, shortcut).
ICO with embedded PNG images (Vista+ format) is the best practice: it has the widest compatibility and smaller file size than embedded BMP. Every major browser — Chrome, Firefox, Safari, Edge — reads favicon.ico from your site root even without any <link> tag.
favicon-16x16.png and favicon-32x32.png
Modern browsers prefer PNG over ICO when you specify <link rel="icon"> explicitly. The 32×32 px size is used for high-DPI displays at 1× logical size. At 2× it looks like the 16 px version on Retina screens. Providing both ensures crisp rendering on all displays.
apple-touch-icon.png (180×180)
When an iOS or iPadOS user taps Add to Home Screen in Safari, iOS uses the apple-touch-icon. The required size for iPhone and modern iPad is 180×180 px. Without this file, iOS falls back to a screenshot of your page — which usually looks terrible.
Key rules for apple-touch-icon:
- Must be PNG.
- No need to pre-apply rounded corners — iOS applies the mask automatically.
- Solid background recommended (no transparency). iOS may add a white background if you use transparency.
- Place the file in your website root and add
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">to<head>.
android-chrome-192x192.png and android-chrome-512x512.png
Android Chrome uses these two sizes for:
- 192×192 — home screen shortcut icon when user saves your site or installs the PWA.
- 512×512 — PWA splash screen and higher-resolution contexts.
Both are referenced from your site.webmanifest. Without them, the install prompt won't show a proper icon.
site.webmanifest
The Web App Manifest is a JSON file that tells browsers about your PWA: name, icons, theme color, display mode. A minimal working manifest:
{
"name": "My App",
"short_name": "App",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0f766e",
"background_color": "#ffffff",
"display": "standalone"
}Link it from your <head>: <link rel="manifest" href="/site.webmanifest">
HTML snippet — all in one
Add this to every page's <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">What about SVG favicons?
Modern Chrome, Firefox, and Edge support <link rel="icon" type="image/svg+xml" href="/favicon.svg">. An SVG favicon is resolution-independent, so it looks perfect at any size. The catch: Safari and older browsers don't support SVG favicons. Best practice in 2025 is to include both — SVG as the primary with ICO/PNG as fallback:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">Generate all sizes instantly
Instead of manually resizing each file, use our free favicon generator. Pick an icon from the 250+ library (Lucide, Font Awesome, Material Design, Bootstrap, Remix) or upload your own image. Customize color, background, and shape, then download the complete package — favicon.ico, all PNGs, site.webmanifest, and the HTML snippet — as a single ZIP. Free, no sign-up.