Why a favicon matters
The favicon is the small icon shown in the browser tab, bookmarks and on the home screen when someone saves your site. It is the first visual a user associates with your brand, and a site without one signals neglect. Even at a few pixels, a clear identity in that tiny square boosts recognition, trust and recall.
Why a text favicon works
Letters scale better than complex illustrations at small sizes. A favicon based on one initial, two letters or a flat symbol stays legible even at 16 pixels. Stripe, Linear, Vercel and Notion all do this: a monochromatic typographic mark on a solid background. Rule of thumb: if your logo cannot be read at 16x16, use a simplified version just for the favicon.
Recommended sizes and formats
- 16x16 and 32x32: desktop tabs.
- 180x180: apple-touch-icon for iOS and Safari.
- 192x192 and 512x512: Android, PWAs and web manifest.
- SVG: if your icon is vector, one SVG covers every size.
Always start from a 512x512 master. Scaling down is safe; scaling up pixelates. This generator exports a 512 PNG you can use as that master.
Installing it on your site
Drop the file into the project root and add the tags inside the <head>:
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />Modern frameworks (Astro, Next, Nuxt) usually have a public/ folder you can drop assets into and they get served automatically. Remember to hard refresh: browsers cache favicons very aggressively.
Common mistakes
- Too much detail: subtle gradients vanish at 16 px. Use flat colors.
- Low contrast: if background and text are too similar, the icon disappears against dark browser chrome.
- Thin strokes: use bold or black weights. Regular looks weak when scaled down.
- Forgetting dark mode: test your favicon in dark themes in Chrome and Firefox; some pairings break.
Design best practices
Stay consistent with your main palette: the favicon should be a condensed version of the logo, not a separate illustration. If you have a symbol or monogram, that is the ideal pick. If not, an initial in a typeface with personality is enough. Test the result on light and dark backgrounds before shipping, and verify legibility in real tabs after deploy.