The term favicon comes from favorite icon, coined in 1999 when Internet Explorer 5 introduced it for bookmarks. Today it's a universal standard present in all modern browsers.
A favicon serves three key roles: brand identity (users recognize your site among dozens of tabs), professionalism (a site without a favicon looks careless), and mobile experience (iOS and Android use it when saving the site to home screen).
Unlike a full logo, a favicon must work at tiny sizes (16×16 pixels on desktop, up to 512×512 in PWAs). This demands deliberate design: simple shapes, high contrast, no details that disappear when scaled down.
The original .ico format is obsolete. Current browsers prefer PNG or SVG. The recommended strategy includes:
- favicon.svg: scalable, ideal for modern browsers (Chrome 80+, Safari 15+). Supports light/dark mode with CSS media queries inside the SVG.
- favicon-32x32.png and favicon-16x16.png: fallback for older browsers and clarity at specific sizes.
- apple-touch-icon.png (180×180): for iOS when users save the site to their home screen.
- manifest.json: defines multiple sizes (192×192, 512×512) for Android PWAs.
The basic HTML tag is <link rel="icon" href="/favicon.svg" type="image/svg+xml">. For maximum compatibility, also include PNG versions with their respective tags. Most browsers automatically look for /favicon.ico in the root, but declaring it explicitly is best practice.
Implement a favicon always, even in internal projects or drafts. It's as basic as having a page title. For production sites, it's mandatory.
The process: design a square version of your logo or a representative symbol. Test it at 16px: if it's not clear, simplify. Export in multiple formats using tools like RealFaviconGenerator or Genfy's generator.
For dark mode, SVG allows conditional styles: <style>@media (prefers-color-scheme: dark) { path { fill: white; } }</style>. This makes the favicon automatically adapt to the user's system theme.
In PWAs, the manifest.json must declare icons in multiple sizes: 192×192 (minimum), 512×512 (recommended), and optionally maskable icons with extra padding for Android 13+.
Using only .ico: this format is limited to 256×256 and doesn't support modern transparency or SVG. Generic favicon: using the full logo without adapting results in an illegible blur at 16px.
Forgetting cache: browsers cache favicons aggressively. Change the URL (favicon.svg?v=2) when updating. Ignoring iOS: without apple-touch-icon.png, iOS uses a horrible screenshot of the site.
Not testing in real conditions: verify how it looks in actual tabs, in both light and dark themes. Design tools don't replicate the browser experience.
Examples
favicon.svg with media query for dark modePNG at 16×16, 32×32 and 180×180 for full compatibilitymanifest.json with icons[192, 512] for Android PWALink tag with type='image/svg+xml' to prioritize SVG
FAQ
Is SVG or PNG better for a favicon?
SVG is superior: scales perfectly, weighs less, and supports dark mode with CSS. But include 32×32 PNG as fallback for old Safari and IE.
Why doesn't my favicon update when I change it?
Aggressive browser caching. Add a query string (?v=2) to the favicon URL in HTML and manually clear cache (Ctrl+Shift+R).
What size should the favicon be?
Minimum 32×32 PNG for desktop. For PWA: 192×192 and 512×512 PNG. For iOS: 180×180 PNG (apple-touch-icon). SVG is scalable so any size works.