The Small Icon with a Big Job
A favicon (short for "favorites icon") is the small icon that appears in your browser tab next to the page title. It also shows up in your bookmarks bar, browser history, and on mobile home screens when someone saves your website as a shortcut. The name comes from Internet Explorer's original feature of showing an icon next to bookmarked "favorites."
Favicons are typically 16 by 16 pixels or 32 by 32 pixels in a browser tab, though modern implementations use larger versions (up to 512 by 512 pixels) for different contexts like mobile home screens and app tiles. Despite their small size, favicons serve an important purpose in helping users identify your website quickly among many open tabs.
If you have ever had a dozen browser tabs open and used the tiny icons to find the one you wanted, you already understand why favicons matter. Without one, your site displays a generic browser icon that makes it indistinguishable from any other site without a favicon.
Why Your Business Needs a Favicon
A missing favicon is one of the most common signs of an unfinished or unprofessional website. Here is why it matters:
- Brand recognition: Your favicon is a miniature representation of your brand. It reinforces your visual identity every time someone sees your site in their browser. Consistent branding across all contact points, even small ones, builds familiarity and trust.
- Professionalism: A custom favicon signals that attention has been paid to the details of your website. A missing or generic favicon suggests the site was not finished thoroughly.
- Usability: When users have multiple tabs open, your favicon helps them find your site quickly. This is a small but real contribution to a positive user experience.
- Search results: Google sometimes displays favicons next to search results on mobile devices. Having a clear, recognizable favicon can make your listing stand out slightly in search results.
- Mobile bookmarks: When someone adds your website to their phone's home screen, your favicon becomes the app icon. A well-designed favicon ensures your site looks professional alongside native apps.
What Makes a Good Favicon
Designing an effective favicon requires working within tight constraints. At such small sizes, detail gets lost. Here are the principles that work:
- Simplicity: The most effective favicons use a single letter, a simple shape, or a highly simplified version of a logo. Complex images become unrecognizable at 16 pixels.
- High contrast: Use colors that stand out against both light and dark browser chrome. A favicon that blends into the tab bar defeats its purpose.
- Brand connection: Use your primary brand color or the most recognizable element of your logo. The goal is instant association with your business.
- No text at small sizes: Full words or long text are unreadable at favicon sizes. A single letter or initial can work, but anything more will look like noise.
Many businesses use the first letter of their name in their brand color, set against a contrasting background. This approach is simple, recognizable, and works well at every size.
Technical Details
Modern favicon implementation involves providing multiple sizes for different contexts:
- 16x16 pixels for browser tabs
- 32x32 pixels for taskbar shortcuts and high-DPI displays
- 180x180 pixels for Apple touch icons (iOS home screen)
- 192x192 and 512x512 pixels for Android home screen and Progressive Web Apps
The traditional favicon format was ICO (a special format that can contain multiple sizes in one file), but modern browsers support PNG and SVG favicons. SVG favicons are especially useful because they scale to any size without losing quality and can even adapt to dark mode.
A professional web developer will typically set up all the necessary favicon sizes and include the proper HTML tags so your icon appears correctly everywhere. This is one of the many details that separates a professionally built website from a quick DIY setup.
Creating Your Favicon
If you already have a logo, your favicon should be derived from it. This usually means extracting the most recognizable element -- an icon mark, a letter, or a symbol -- and adapting it to work at small sizes. If your logo is text-only, the first letter in your brand color is typically the best approach.
There are free online tools that generate all the required favicon sizes from a single image. However, simply shrinking your full logo rarely produces a good result. Taking the time to design a simplified version specifically for favicon use is worth the effort. If you are working with a web design professional, favicon creation should be included as part of the project.