If you've ever noticed a small icon next to a website's name in your browser tab, that's a favicon. Short for favorites icon, it's one of the smallest yet most impactful branding elements on the web.
The definition
A favicon is a small square image associated with a website. Browsers display it in:
- Browser tabs (next to the page title)
- Bookmarks and reading lists
- Browser history
- iOS home screen shortcuts (when using "Add to Home Screen")
- Android home screen and PWA install prompts
- Taskbar and Start menu when pinning a website on Windows
- Search engine results pages (as site icons next to URLs)
Google displays favicons in mobile search results next to the domain name. A missing or broken favicon is replaced by a generic grey globe icon — a subtle signal that the site isn't fully set up.
A brief history
Microsoft introduced favicons in Internet Explorer 5 (1999). The browser would request /favicon.ico from every server it visited, leading to millions of 404 errors across the web before webmasters caught on. The W3C standardized the <link rel="shortcut icon"> tag in 2003. Over time, browsers added support for PNG, SVG, and device-specific icon formats.
Favicon formats explained
ICO (.ico)
The original favicon format. An ICO file is a container that can hold multiple image sizes (e.g. 16×16, 32×32, 48×48) in one file. The browser picks the best size for the context. Supported by every browser since IE5. A well-formed favicon.ico embeds PNG images internally for smaller file size.
PNG (.png)
The modern preferred format. PNG favicons are specified with an explicit <link> tag and size attribute. Transparent PNGs work well on dark or colored tab bars. Provide 16×16 and 32×32 versions at minimum.
SVG (.svg)
Resolution-independent, meaning it looks crisp at any screen density. Supported in Chrome, Firefox, and Edge but not Safari (as of 2025). The SVG favicon can also respond to prefers-color-scheme (dark mode) using a <style> block inside the SVG.
Favicon sizes in 2025
A complete, modern favicon setup includes:
- 16×16 px — browser tab default
- 32×32 px — high-DPI tab, toolbar shortcut
- 48×48 px — Windows taskbar, some contexts
- 180×180 px — iOS "Add to Home Screen" (apple-touch-icon)
- 192×192 px — Android Chrome shortcut, PWA
- 512×512 px — PWA splash screen, Play Store listing
Why your favicon matters for SEO
Google has officially stated that favicons appear in mobile search results and that a recognizable favicon increases click-through rates. A missing favicon shows a grey globe — indistinguishable from any other result. A distinctive favicon makes your result memorable and more likely to be clicked.
There are also indirect effects: a professional favicon signals to users (and Googlebot) that a site is actively maintained. Sites missing basic elements like favicons may be perceived as lower quality.
How to create a favicon
The fastest way is to use our free favicon generator. Choose from 250+ icons across Lucide, Font Awesome 6, Material Design, Bootstrap Icons, and Remix Icons, or upload your own image. Customize the background color, icon color, padding, and shape. Then download the complete package — favicon.ico, PNGs for every size, apple-touch-icon.png, site.webmanifest, and a ready-to-paste HTML snippet. No account, no cost.