Favicons and app icons
Ship an SVG favicon, an ICO fallback at /favicon.ico, an apple-touch-icon, and a maskable PWA icon. Five files cover every browser and home-screen surface.
What it is
A favicon is the small icon that represents your site in browser tabs, bookmarks, history, home-screen shortcuts, and OS task switchers. Modern sites need a small set of icons in different formats to cover every surface that displays them.
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Why it matters
The favicon is one of the most visible pieces of branding on the web. Tab strips, bookmark bars, and history menus are full of them, and a missing or broken icon looks unfinished. It also affects:
- Recognition — users scan tab strips visually, not by reading title text.
- Home-screen installs — when a user adds your site to their phone, the icon is what they see every day.
- Search results — Google shows a favicon next to mobile search results.
- OS surfaces — pinned tabs, recent apps, share sheets, and notification icons all pull from the icon set.
A single 16×16 ICO from 2008 still works, but looks terrible on a high-DPI screen, and is wrong on a phone home screen.
How to implement
Aim for five files. They cover every browser, every platform, and every density:
/favicon.svg— the modern default. One vector file, infinitely scalable, supports light- and dark-mode variants via CSS inside the SVG. Most browsers since 2021 prefer it./favicon.ico— a multi-resolution ICO containing 16×16, 32×32, and 48×48 PNGs. Older browsers and crawlers expect this at the root path./apple-touch-icon.png— 180×180 PNG used by iOS when the user adds the site to their home screen. iOS does not honour the SVG favicon for home screens./icon-192.pngand/icon-512.png— referenced from the web app manifest, used by Android and PWA installs.- A maskable variant — a 512×512 PNG with the important content inside an 80% safe zone, so platforms can crop it to round, squircle, or other masks without clipping your logo.
Wire them up in the head:
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />And declare the maskable icons in the manifest:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Even with explicit <link rel="icon"> tags, browsers and crawlers still request /favicon.ico from the site root. Always serve a real ICO at that path. A 404 there shows up in every server log forever.
Design the icon to read at 16×16. Logos with thin text or fine detail disappear; bold marks survive. Test in both light and dark browser themes.
Common mistakes
- Only shipping a 16×16 PNG. Looks blurry on every modern screen.
- No
/favicon.icoat the root, so crawlers and old browsers 404 endlessly. - An apple-touch-icon with transparency. iOS used to add its own rounded background; modern iOS does not, and transparent gaps look broken.
- A maskable icon with the logo at the very edge. The platform crops it; design for an 80% safe zone.
- Forgetting to update the icon when rebranding. Stale icons cached by browsers persist for months.
Verification
- Open the site in a browser. The tab should show a sharp icon, not a blank page.
- Visit
https://yoursite.example/favicon.icodirectly — it should return 200. - On iOS Safari, use “Add to Home Screen” and check the icon is crisp and well-cropped.
- On Android Chrome, install the PWA and confirm the launcher icon uses the maskable variant.
- Check server logs for
/favicon.ico404s.