web performance and seo
Favicon
A favicon is the small square icon displayed in browser tabs and bookmarks that identifies your website.
What is Favicon?
A favicon is the small square icon displayed in browser tabs, bookmark lists, browser history, and mobile home screens when users save a website. The term comes from "favorite icon," introduced by Microsoft in Internet Explorer 5 in 1999. Modern websites require multiple favicon formats to display correctly across all browsers and devices.
Importance of Favicon
Without proper favicons, your website appears unprofessional in browser tabs and loses brand recognition opportunities across dozens of user touchpoints daily. Favicon size requirements vary dramatically — from 16×16 pixels in desktop tabs to 512×512 pixels for Android home screen shortcuts — making it essential to generate the complete set from high-resolution source artwork.
Favicon in Practice
A typical favicon implementation includes five files: a favicon.ico with 16×16 and 32×32 pixel variants, a 32×32 PNG for modern browsers, a 180×180 apple-touch-icon.png for iOS devices, and 192×192 plus 512×512 icons for Android Chrome. Each file serves different rendering contexts, from tiny 16-pixel browser tabs to large home screen shortcuts.
Favicon Best Practices
- → Design favicons using simple icon marks or single letters, never full wordmark logos that blur at small sizes.
- → Generate all favicon sizes from vector artwork to ensure sharp rendering at every dimension.
- → Include both ICO and PNG formats for maximum browser compatibility across desktop and mobile devices.
Example of Favicon
Related Terms
Frequently Asked Questions
What is a favicon and why do websites need one?
A favicon is a small square icon that appears in browser tabs, bookmarks, and home screen shortcuts to identify your website. Websites need favicons because they appear in multiple contexts where users interact with your brand, from browser tabs to mobile home screens. Without a favicon, browsers display a generic placeholder icon, missing crucial branding opportunities.
What size should a favicon be for all devices?
Modern websites need multiple favicon sizes: 16×16 and 32×32 pixels for desktop browsers, 180×180 pixels for iOS home screens, and 192×192 plus 512×512 pixels for Android devices. The traditional favicon.ico format should contain both 16×16 and 32×32 variants in a single file. Each size serves different display contexts across desktop and mobile platforms.
Why is my favicon blurry in browser tabs?
Favicons appear blurry when they're generated from low-resolution source images or contain too much detail for small pixel dimensions. Browser tabs typically display favicons at 16×16 or 32×32 pixels, where complex logos become illegible smears. The solution is creating favicons from vector artwork using simple icon marks rather than detailed wordmarks.