Favicon Files You Need in 2026
| File | Size | Purpose | Required? |
|---|---|---|---|
| favicon.ico | 32×32 (+ 16×16 embedded) | Browser tabs, legacy browsers | Yes — place in root |
| favicon.svg | Vector | Modern browsers (Chrome 80+, Firefox, Safari 9+) | Strongly recommended |
| apple-touch-icon.png | 180×180 | iOS home screen, Safari tabs, iMessage | Yes for iOS users |
| icon-192.png | 192×192 | Android Chrome, PWA install | Yes for PWA/Android |
| icon-512.png | 512×512 | PWA splash screen, Android | Yes for PWA |
| og-image.png | 1200×630 | Social sharing preview | Recommended |
The Minimal HTML Setup (2026)
This is all you need in <head>. The browser handles the rest through the web app manifest.
Web App Manifest (manifest.json)
The manifest.json file provides icon, name, and display settings for PWA installation and Android home screen shortcuts.
{
"name": "Your App Name",
"short_name": "App",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#050508",
"theme_color": "#7c6fff"
}SVG Favicon with Dark Mode Support
SVG favicons support prefers-color-scheme media queries — your favicon can automatically switch between light and dark variants matching the OS theme.
Maskable Icons for Android
Android uses 'maskable' icons which get cropped to various shapes (circle, squircle, etc.). The safe zone is a circle inscribed in the icon — keep important content in the center 80% of the canvas.
/* Maskable icon: safe zone is 80% of the icon area (center circle) */
/* 192×192 icon → safe zone = center 153×153px circle */
/* Generate maskable icons with maskable.app (browser tool):
1. Upload your icon
2. See how it looks with different Android masks
3. Export the padded version with safe zone */
/* Purpose values in manifest.json:
"purpose": "any" — normal display
"purpose": "maskable" — adaptive icon for Android shapes
"purpose": "maskable any" — use for both (single icon) */Common Favicon Mistakes
- Only providing favicon.ico — iOS won't show your icon on home screen; PWA won't install with the right icon; Android will show a generic icon.
- Missing favicon.svg — modern browsers prefer SVG because it scales perfectly at any device pixel ratio. ICO and PNG look blurry on Retina/HiDPI screens.
- Putting favicon.ico anywhere except the root — browsers request /favicon.ico automatically without any HTML tag. It must be at the domain root.
- Not including purpose: maskable in manifest — without maskable icons, Android shows your icon in a white square box instead of adapting to the device's icon shape.
- Apple touch icon at 144×144 instead of 180×180 — 180×180 is the modern requirement for iPhone Retina + Pro Max. 144×144 was the 2012 standard.
Frequently Asked Questions
- Do I still need favicon.ico in 2026?
- Yes — place it in your domain root (/favicon.ico) without a link tag. Browsers request it automatically as a fallback. It's also used by Windows taskbar pinned sites, Slack link previews, and various crawlers. It only needs to be 32×32.
- What's the difference between apple-touch-icon and apple-touch-icon-precomposed?
- The -precomposed variant was used before iOS 7 to opt out of Apple's gloss/shine overlay. Since iOS 7 dropped the overlay, they're equivalent. Only use apple-touch-icon — the -precomposed variant is a historical artifact.
- How do I create favicon.ico from PNG?
- You can use ImageMagick: convert icon-32.png favicon.ico. Alternatively, use online tools like favicon.io or RealFaviconGenerator. The ICO format can embed multiple sizes (16, 32, 48) in one file.
- Should my PWA icon have a background color?
- Yes — a solid background color looks better as a maskable icon. Transparent backgrounds on maskable icons often look broken when the OS applies its shape mask. Give your icon a solid background matching your app's primary color or surface color.