What is a Favicon?
A comprehensive guide to understanding favicons and their importance for your website.
Definition
A favicon (short for "favorite icon") is a small icon associated with a particular website or web page. Browsers display favicons in the address bar, next to the page title in tabs, in browser history, and in bookmarks.
Favicons are typically 16x16 or 32x32 pixels and use file formats like ICO, PNG, or SVG. They serve as a visual representation of your brand and help users quickly identify your website.
The term "favicon" originated from Microsoft Internet Explorer, which called them "favorites icons" because they appeared in browser bookmarks (called "favorites" in Internet Explorer).
Where Favicons Appear
Favicons appear in multiple places across the web and browser interfaces. Understanding these contexts helps you create icons that work effectively everywhere.
Browser Tab Identification
Bookmark & History
Mobile Home Screens
Common Favicon Sizes
Modern websites use multiple favicon sizes to ensure optimal display across different devices and contexts:
16x16
Address bar, legacy browser support
32x32
Browser tabs, bookmarks
96x96
Desktop shortcuts, Windows tiles
192x192
Android home screen, PWA
512x512
Splash screens, high-resolution icons
Why Favicons Matter
A well-designed favicon provides several important benefits for your website:
Brand Recognition
Favicons act as mini billboards for your brand. Even at 16x16 pixels, a good favicon reinforces your visual identity and helps users remember your site.
User Experience Improvement
Users can quickly identify your site among multiple browser tabs, making navigation more efficient and reducing cognitive load.
Professional Appearance
A favicon signals that your website is legitimate and professionally maintained. Sites without favicons often appear incomplete or suspicious.
Mobile App-like Experience
With apple-touch-icon and manifest.json, your website can be added to mobile home screens, providing an app-like experience.
Favicon Formats
Different file formats are used for favicons, each with its own advantages:
ICO (Windows Icon)
The original favicon format. Supports multiple resolutions in a single file. Widely supported but limited to 256 colors in older versions.
PNG (Portable Network Graphics)
Modern format with full color support and transparency. Preferred for new websites. Used for apple-touch-icon and specific sizes.
SVG (Scalable Vector Graphics)
Vector format that scales to any size without quality loss. Great for simple logos. Modern browsers support SVG favicons.
Favicon Best Practices
Follow these guidelines to create effective favicons:
Keep It Simple
At 16x16 pixels, complex details become unreadable. Use simple shapes, bold colors, and avoid text or intricate designs.
High Contrast
Ensure good contrast between your icon and background. Test in both light and dark modes. Consider creating separate dark mode icons.
Test Across Sizes
Preview your favicon at all intended sizes (16x16, 32x32, 96x96, 192x192) to ensure it remains recognizable and legible.
Use High-Resolution Source
Start with an image at least 512x512 pixels. When generating smaller sizes, high-resolution source ensures quality retention.