Favicon best practices
Generating the files is the easy part. Shipping a favicon that looks sharp in every browser, on every density, in light and dark mode, takes a handful of design and operational habits. Here is the short checklist.
1. Design for 16×16 first
Open your source artwork at 16×16 in your design tool before you do anything else. If the silhouette is muddy or the strokes vanish, redesign. Tricks that help: increase contrast, thicken strokes by 50–100%, drop fine details, and consider an icon-only variant of your wordmark. A great favicon usually has one strong shape and one accent colour.
2. Use the .ico file as a multi-resolution container
A single-image ICO is wasted potential. Bundle 16, 32, and 48 inside one favicon.ico so Windows Explorer, the taskbar, and legacy tools each get a crisp version. OhMyIcon does this automatically.
3. Ship a real Web App Manifest
A starter manifest.json with { name: "Your Site Name" } earns a generic install prompt. Set name, short_name,theme_color, background_color, display: "standalone", and ideally start_url and scope. PWA Builder and the Lighthouse PWA audit will tell you what is missing.
4. Provide a dark-mode favicon if your icon is dark
Many browsers now show tab chrome in dark mode. A dark logo on a transparent background becomes invisible. Two fixes:
- Bake a light background tile into the favicon so it stays legible on any tab colour.
- Or supply a dark-variant SVG via media query:
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">.
5. Cache aggressively but version on change
Favicons are static assets — set a long Cache-Control: max-age=31536000, immutable. When you redesign, change the filename (favicon.v2.ico) or append a query string. Otherwise users will see the old icon for days because browsers cache favicons very aggressively.
6. Validate after deploy
Run the favicon checker against the production URL. Open Chrome DevTools → Application → Manifest to confirm the manifest parses. On a real iPhone, long-press the share sheet → Add to Home Screen — that surfaces every missing apple-touch-icon.
7. Beware of CDN rewrites and SPA routing
Some CDNs and single-page-app routers will return index.html for missing favicon paths instead of a 404, which causes the browser to render a tiny HTML document as an image (broken icon). Make sure /favicon.ico,/manifest.json, and friends are served as real static files.
8. Don't forget Open Graph
Favicons are tab-sized; Open Graph images are share-card-sized (1200×630). They are complementary, not interchangeable. A polished favicon plus a custom OG image is the difference between "built in a weekend" and "real product".