A favicon (favourite icon) is a small, iconic image that represents a website. It appears in browser tabs, bookmarks, history, and on mobile home screens when a site is saved. Though tiny, favicons play an important role in branding and user experience.
Standard Favicon Specifications
Modern favicons are typically square and come in multiple sizes. The most common size is 32x32 pixels for desktop browsers. Mobile devices often use larger sizes like 180x180 pixels for home screen icons. Most websites provide multiple sizes in different formats (ICO, PNG, SVG) to support all devices.
Where Favicons Appear
Browser tabs - Helps users identify your site when multiple tabs are open. Bookmarks - Makes your site recognisable in bookmark lists. Browser history - Easier to find past visits. Mobile home screens - Acts as an app icon when users save your site. Search results - Some search engines display favicons next to results.
Creating an Effective Favicon
Keep it simple, favicons are tiny and detail gets lost. Use your logo’s mark or a simplified version. Ensure it’s recognisable even at small sizes. Use colours that stand out and align with your brand. Test it on both light and dark backgrounds. Avoid text, it’s usually unreadable.
Technical Implementation
Favicons are referenced in your HTML head section using link tags. Modern browsers support PNG and SVG formats, offering better quality than old ICO files. SVG favicons adapt to light and dark modes. Providing multiple sizes ensures optimal display across all devices.
Why Favicons Matter
Favicons enhance brand recognition and professionalism. Sites without favicons look unfinished or untrustworthy. When users have multiple tabs open, recognisable favicons help them quickly find your site. This small detail significantly improves user experience.
Common Mistakes
Using too much detail that becomes invisible at small sizes. Forgetting to provide multiple sizes for different devices. Using colours that disappear against browser chrome. Neglecting to update the favicon when rebranding. Not testing on both light and dark browser themes.