The Tiny Icon With Outsized Impact
A favicon is the small icon displayed in browser tabs, bookmark lists, browser history, and — since 2019 — in Google mobile search results. These tiny images carry disproportionate brand weight. Research shows that users distinguish between open tabs primarily using favicon recognition, not tab text. A missing or generic favicon makes your site harder to find among multiple open tabs.
Favicon Sizes and Formats
| Format | Size | Required For |
|---|---|---|
| ICO | 16×16, 32×32 | Legacy browser tab support |
| PNG | 192×192 | Android home screen icons, PWA |
| PNG | 512×512 | PWA splash screens, high-DPI displays |
| Apple Touch Icon | 180×180 | iOS "Add to Home Screen" |
| SVG | Scalable | Modern browsers — perfectly crisp at any size |
The Google Search Connection
Since 2019, Google displays website favicons next to URLs in mobile search results. A missing favicon shows a generic globe icon. A pixelated or low-quality favicon signals to users — and potentially to Google's quality signals — that a site may be poorly maintained. Keeping your favicon crisp and current is a small but real SEO consideration.
How to Add a Favicon to Your Website
- Create your favicon as a 512×512 PNG first
- Generate ICO (multi-size: 16, 32, 48) using a converter
- Place
favicon.icoin your site's root directory - Add to your HTML
<head>:<link rel="icon" href="/favicon.ico"> - Add Apple Touch Icon:
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> - Reference 192px and 512px icons in your
manifest.jsonfor PWA support
Why do some sites show a broken favicon?
The most common causes: incorrect file path in the HTML, the server returning a 404 for favicon.ico, or CORS restrictions blocking cross-domain favicon requests. Most browsers cache favicon requests aggressively — clear your browser cache after making favicon changes.