GoWin Tools
Tools
โ† Favicon Generator

Favicon Generator ยท 5 min read

Favicon History: How IE5 Accidentally Invented Browser Tab Icons

The favicon was not planned โ€” it emerged from Internet Explorer 5's bookmarking feature as an unintended side effect. Here is how a browser privacy vulnerability became one of the most durable conventions of the web.

The Accidental Invention

Internet Explorer 5, released in March 1999, introduced a new bookmarking feature: when a user bookmarked a website, IE5 would automatically fetch an image from favicon.ico at the root of the website (e.g., https://example.com/favicon.ico) and display it next to the bookmark in the browser's Favorites menu. The tiny 16ร—16 pixel image gave users a visual identifier for bookmarked sites.

This was not planned as a web standard โ€” Microsoft implemented it as a proprietary IE5 feature without consulting the W3C or other browser vendors. Webmasters who examined their server logs noticed an unexpected HTTP request for /favicon.ico arriving from IE5 browsers whenever users bookmarked their pages. The request came whether or not a favicon.ico file existed, generating a 404 error in server logs for sites that had not added one.

The term "favicon" is Microsoft's portmanteau of "Favorites icon" โ€” the icon displayed in the Favorites panel. The name reflected the original use case: a visual identifier for bookmarks, not for browser tabs (which IE5 did not have).

The Privacy Controversy

Favicons immediately generated a privacy controversy. Because IE5 fetched the favicon when a user bookmarked a page โ€” not when they first visited it โ€” website owners could potentially use their server logs to detect when IE5 users had bookmarked their pages. The favicon request was a behavioral signal: it arrived after, not during, the normal page visit.

More significantly, because the browser cached the favicon, the cache could be queried by websites to determine whether a user had previously visited (and thus cached the favicon from) another site. This technique โ€” "history sniffing" using favicon cache โ€” was a real privacy vulnerability that existed in various forms until browsers tightened cache isolation rules in the early 2010s.

The favicon's privacy implications were one of the first examples of an apparently innocuous browser feature creating unexpected information disclosure. They foreshadowed decades of browser fingerprinting, tracking cookie debates, and the ongoing tension between rich browser features and user privacy.

Standardisation: The HTML Link Element

As favicons became widespread (web developers quickly adopted them because they improved the visual quality of bookmarks), W3C incorporated favicon support into web standards. HTML 4.01 (1999) and subsequently HTML5 defined the <link> element syntax for declaring favicons:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

The rel="icon" relationship was standardised as the way to explicitly declare a favicon, rather than relying on the implicit favicon.ico convention. This allowed specifying alternative locations, different MIME types, and โ€” later โ€” different sizes for different contexts.

The ICO file format โ€” a Microsoft-specific container format for bitmap images โ€” was the original favicon format because IE5 required it. ICO files can contain multiple images at different sizes within a single file, making them useful for favicons that need to appear at different resolutions.

The Favicon Moves to Tabs

Mozilla's browser (which became Firefox) introduced tabbed browsing in a form that made favicons central to the user interface. When multiple tabs are open, favicons are the primary visual identifier for each tab โ€” the most efficient way to distinguish between open pages at a glance.

This shift transformed the favicon from a bookmarks-only feature to an essential part of the browser's tab UI. The quality and recognisability of a favicon became important for usability: a favicon that is distinctive at 16ร—16 pixels helps users manage multiple tabs efficiently. A blank or poorly designed favicon makes tab switching harder.

Chrome (2008), which placed strong emphasis on tab management and made the tab bar the dominant browser UI paradigm, further cemented the favicon's importance. Chrome's tab design โ€” compact tabs with large favicons โ€” made the 16ร—16 icon the most visible part of a tab for many pages.

Favicon Formats Multiply

As favicons appeared on more devices and in more contexts โ€” desktop browsers, mobile browsers, home screen shortcuts, browser history lists, browser search suggestions โ€” the simple 16ร—16 ICO file proved insufficient. The favicon ecosystem expanded:

  • PNG favicons: Supported by most browsers as an alternative to ICO, enabling higher quality at larger sizes
  • Apple Touch Icon: A 180ร—180 PNG (or multiple sizes) added by Apple for iOS home screen shortcuts, declared with rel="apple-touch-icon"
  • SVG favicons: Supported in modern browsers as a resolution-independent favicon that scales perfectly to any size
  • Web App Manifest icons: JSON-declared icon arrays for Progressive Web Apps, used when a site is added to the home screen on Android
  • Microsoft Tile images: For Windows 8/10 "live tiles" in the Start menu

By 2015, a complete cross-platform favicon implementation required 10 or more different image files and multiple HTML declarations. Favicon generators (tools that produce all required sizes from a single source image) became essential web development utilities.

The Modern State

As of 2024, the practical minimum for cross-platform favicon support is:

  • A favicon.ico at the site root (for older browsers and fallback)
  • A 192ร—192 PNG for Android/Chrome home screen
  • A 180ร—180 PNG for iOS/Safari home screen
  • An SVG favicon for modern desktop browsers
  • A Web App Manifest (manifest.json) for Progressive Web App support

The accidental 16ร—16 image that Microsoft added to improve their bookmarks menu in 1999 has grown into a complex multi-format, multi-platform identity system โ€” one of the most visible pieces of a website's brand, displayed in billions of browser tabs every day.

Generate your favicon โ†’

References

  1. Microsoft Corporation. (1999). Internet Explorer 5: New Features. microsoft.com.
  2. Galvani, B. (2003). A short history of the favicon. In Icons of the Web. Favicon Archive.
  3. WHATWG. (2021). HTML Living Standard: rel=icon. html.spec.whatwg.org.
  4. W3C. (2003). HTML 4.01: Link element. w3.org.
  5. Pilgrim, M. (2009). Dive Into HTML5: You Are Here. diveintohtml5.info.