Browser Tab Icon History: From 16px to Touch Icons

1999: Internet Explorer 5 and the First Favicon

Internet Explorer 5 (March 1999) introduced the favicon as a bookmarks/Favorites feature. The browser automatically fetched favicon.ico from the website root and displayed it in the Favorites sidebar. The icon was a 16×16 pixel ICO file — the Windows shell icon format.

There was no HTML tag for favicons in 1999. IE5 used only the hardcoded path /favicon.ico. Web developers who noticed the requests in their server logs added 16×16 ICO files to their sites. The practice spread through word-of-mouth among early web developers, and the convention of favicon.ico at the site root became de facto standard — even before any formal specification existed.

2003: Opera and Tabs

Opera was the first major browser to prominently display favicons in browser tabs. Opera had supported tabbed browsing since 2000, and favicons in tabs made the feature significantly more usable — each tab could be identified by its favicon rather than its truncated page title alone.

This shift transformed the favicon from a bookmarks UI element to a primary navigation aid. Tab management with favicons became one of the most-cited usability advantages of tabbed browsing. The quality of a site's favicon became a user experience issue, not just a branding one.

2004–2005: Firefox and the HTML Link Element

Mozilla Firefox 1.0 (November 2004) displayed favicons in tabs and popularised the <link rel="icon"> HTML syntax for explicitly declaring a favicon. This allowed specifying alternative locations and MIME types rather than relying on the hardcoded /favicon.ico convention:

<link rel="icon" type="image/png" href="/images/favicon.png">

Firefox's support for PNG favicons (in addition to ICO) gave designers higher quality icons — ICO's compression was often poor for photographic or complex images, while PNG offered better quality at the same file size.

The W3C incorporated favicon declaration into the HTML 4 specification as a <link rel="shortcut icon"> relationship. The "shortcut icon" value (rather than just "icon") was a compromise accommodating IE's existing implementation. Modern HTML5 uses only rel="icon", though "shortcut icon" continues to work in all browsers for backward compatibility.

2007: iPhone and the Apple Touch Icon

When Apple introduced the iPhone in January 2007, it shipped with Safari as the only permitted browser. Adding a website to the home screen — to create a shortcut that launched the site from the home screen like an app — used a 57×57 pixel PNG icon rather than the 16×16 favicon. Apple added the rel="apple-touch-icon" link relationship:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The Apple Touch Icon added a second, separate icon requirement to web development — one that existed entirely outside the W3C specifications and browser standards. Apple defined its own icon sizes and link relationships, which other mobile browsers (particularly Android's browser) later adopted or created alternatives for.

Apple Touch Icon sizes evolved with iPhone screen resolutions:

• iPhone 1–3GS: 57×57 px (1x)
• iPhone 4 (Retina): 114×114 px (2x)
• iPad: 72×72 px, then 76×76 px
• iPad Retina: 144×144 px, then 152×152 px
• iPhone 6+: 180×180 px (3x) — became the recommended single size

2008: Chrome and Tab Prominence

Google Chrome (September 2008) introduced a design that made favicons more prominent than any previous browser. Chrome's tab design placed the favicon and page title as the primary tab content — on a narrow tab, the favicon was the only visible element. The quality and distinctiveness of a favicon became directly important for Chrome users managing multiple tabs.

Chrome's emphasis on favicons also drove quality improvements in how sites designed their icons. A favicon that was "good enough" for bookmarks was sometimes inadequate for Chrome's tab-heavy UX. Brands with complex logos that did not reduce to recognisable 16×16 marks began redesigning their favicons specifically for tab visibility.

2010–2015: Android and Tile Images

Android's browser and later Chrome for Android implemented "Add to Home Screen" functionality using a different mechanism than iOS — initially using the standard favicon (scaled up), then using a higher-resolution icon specified in the manifest or via specific meta tags.

Windows 8 (2012) introduced "Live Tiles" — large icons for websites pinned to the Windows Start screen. Microsoft specified tile images using proprietary <meta> tags:

<meta name="msapplication-TileColor" content="#4f46e5">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

This added yet another set of vendor-specific icon formats to the favicon ecosystem. By 2013–2014, a complete favicon implementation supporting all major platforms required a dozen or more image files.

2015–2018: The Web App Manifest

The W3C Web App Manifest specification (Working Draft, 2015; progressing through 2018) standardised the icon declaration for Progressive Web Apps using a JSON manifest file rather than HTML meta tags. The manifest replaced many of the vendor-specific icon declarations for Android/Chrome, providing a single standard mechanism for specifying app icons at multiple sizes.

2020–2021: SVG Favicons and Modern Simplicity

Chrome 80 (2020) and Safari 14.1 (2021) added SVG favicon support, enabling vector favicons and dark mode support through CSS media queries. Combined with modern best practice recommendations, the favicon implementation has simplified for many sites:

• favicon.ico — fallback (16×16, 32×32 in one file)
• favicon.svg — modern browsers (scales to any size, supports dark mode)
• apple-touch-icon.png — iOS home screen (180×180)
• manifest.json — Android/PWA (with 192×192 and 512×512 icons)

From a dozen files to four — the ecosystem has matured, even if it has not fully simplified. The remaining complexity reflects the genuine diversity of contexts in which a website's icon appears: browser tabs, bookmark lists, home screens, app launchers, operating system taskbars, and browser history lists all have different size requirements and different mechanisms for specifying icons.

Generate your favicon →