Favicons
History & evolution
Favicons were born in 1999 with Internet Explorer 5, which introduced support for 16×16-pixel ICO files associated with bookmarks. Initially a Microsoft proprietary feature, the W3C soon standardised the <link rel="icon"> tag and other browsers adopted the format.
With the rise of mobile devices and high-density screens, requirements grew: Apple introduced the Apple Touch Icon (2007) for iOS, Android required 192×192 px icons, and desktop browsers requested 32×32 and 48×48 px versions.
In 2015, the manifest.json format standardised icon management for Progressive Web Apps (PWA). Today a modern favicon is a set of icons in multiple sizes and formats, from 16×16 px for browser tabs to 512×512 px for PWAs.
Best practices
Implementing favicons correctly requires attention to current standards and platform-specific requirements:
Generate multiple sizes. Prepare at least: 16×16 and 32×32 px for desktop browsers, 180×180 px for Apple Touch Icon, 192×192 and 512×512 px for Android and PWA.
Design for small sizes. At 16×16 px fine details disappear. Keep it simple: use clear iconic shapes, contrasting colours and avoid small text.
Implement HTML tags correctly. Place favicon.ico at the domain root and declare other versions with <link> tags in the <head>.
Version your files when updating. Browsers cache favicons aggressively. Add a version parameter (e.g. favicon.ico?v=2) to force a reload on design changes.
Use cases
Favicons play an immediate practical role in multi-tab management. When users have dozens of tabs open, they recognise each service visually by its icon. Productivity apps like Gmail, Notion or Figma invest in their favicon design because their users constantly switch between many open tabs.
In professional development environments, it is common to use distinct favicons per environment (production, staging, local), often with slightly different colours or icons, to prevent costly mistakes. For e-commerce sites and institutional portals, a favicon consistent with corporate visual identity reinforces visitor trust.
Curiosities
- The first documented favicon was the MSN 5-point star in 1999, when Internet Explorer 5 introduced support for icons in bookmarks.
- Twitter dynamically changes its favicon to show the number of pending notifications, a technique popularised in the early 2010s.
- The ICO format can contain multiple resolutions in a single file. Most tools automatically generate 16, 32 and 48-pixel variants within a single favicon.ico.
- SVG favicons, which scale perfectly at any resolution, have been supported by modern browsers since 2020 and can adapt to the OS dark mode preference.