The History of the Favicon: From Internet Explorer 5 to PWAs

Quick answer: Microsoft introduced the favicon with Internet Explorer 5 in 1999 as a small icon for bookmarked "favorite" pages, fetched from /favicon.ico at the site root; browsers later extended it into the address bar and then tabs, Apple added a dedicated touch icon in 2007 for the iPhone home screen, and the W3C Web App Manifest later formalized a full set of app icons for the PWA era.

Almost every production site on the web ships a small family of icon files today — an ICO, a set of PNGs, an Apple touch icon, manifest icons for Android and PWAs. None of that existed as a requirement in the web's early years. It grew, piece by piece, out of a small feature Microsoft shipped in 1999 to make bookmarks look nicer.

The favorite icon, literally

The word "favicon" is a contraction of "favorite icon," and that name is the whole origin story. Internet Explorer 5, released in 1999, introduced the ability for a site to supply a small icon that would show up next to its entry in the browser's Favorites list — what most people just called bookmarks. Instead of a generic page icon, a site could have its own small mark sitting next to its name.

The mechanism Microsoft chose was simple: the browser would look for a file at /favicon.ico, at the root of the domain, with no need for the page itself to declare it. If it was there, it got used. If not, nothing happened.

That fallback convention is exactly why /favicon.ico still works today, decades later, even on sites that never explicitly link to it. It's one of the oldest surviving default-path conventions on the web, and it's the reason a missing favicon.ico can still generate a quiet 404 in the console of a site that otherwise declares its icons correctly — the browser is still checking that same path out of habit, just in case. We cover exactly this issue in our guide to favicon 404 console errors and whether favicon.ico is still needed in 2026.

From bookmarks to the address bar to tabs

Other browsers adopted the favicon concept in the years that followed, and its role kept expanding well beyond its original job. It started appearing in the address bar next to a site's URL, giving users a quick visual anchor for which site they were on. That was useful, but a relatively minor visibility boost compared to what came next.

Tabbed browsing changed everything for the favicon. As tabs became the standard way to browse — popularized through the early-to-mid 2000s as more browsers adopted the model — a favicon stopped being a nice-to-have detail in a bookmarks menu and became the primary visual identifier of an open tab. With a dozen tabs open and most of the titles truncated into unreadable fragments, the favicon is often the only thing distinguishing one open page from another at a glance. What began as a small favorites-list flourish had quietly become one of the most-seen pieces of a site's visual identity, competing for attention in a strip of pixels most designers never originally accounted for.

Apple and the birth of the touch icon

The next major shift came from a completely different direction: the original iPhone, released in 2007. iOS let users add a shortcut to a web page directly on the home screen, sitting alongside native apps. But a 16px favicon, designed for a browser tab, looked terrible blown up to the size of a home-screen app icon — blurry, low-detail, obviously not built for the job.

Apple's solution was a separate, dedicated icon specifically for this use case, declared via a distinct link tag rather than reusing the tiny favicon: the apple-touch-icon. It was designed to be much larger from the start, so it could sit convincingly next to real app icons instead of looking like a stretched-out afterthought. This is the direct ancestor of the 180×180px apple-touch-icon still used today, and it's covered in more depth in our comparison of favicons versus apple touch icons.

This was also the first time an "icon" for a website had to be treated as more than a decorative detail — it had to hold up as a genuine app icon, sitting on a home screen among icons designed by professional app teams. The bar for what a site's icon needed to look like went up considerably.

The manifest era

As Android matured and installable web apps became a real category rather than a novelty, the same problem Apple had already solved informally needed a proper standard. The W3C's Web App Manifest specification formalized this: a JSON file, typically site.webmanifest, describing an installable web app's icons at multiple sizes, its display mode (standalone, fullscreen, browser), its theme color, and other install-time metadata.

This moved icon declaration beyond a handful of individual <link> tags in the document head and into a single structured file that a browser or OS could read all at once to understand exactly what a "installed" version of the site should look like — icon at 192px for the home screen, icon at 512px for a splash screen, theme color for the status bar, and so on. Our guide to web app manifest icons covers exactly what belongs in this file today.

A small icon, quietly essential

None of this was planned as a system. It accumulated: a bookmarks flourish in 1999, extended into address bars, promoted to a tab's primary identity once tabs took over browsing, forked into a separate large icon for Apple's home screen in 2007, and eventually formalized into a structured manifest for the installable-app era. Each addition solved a real problem that the previous format couldn't, and none of them replaced what came before — which is exactly why a modern site still needs an ICO, a PNG set, an apple-touch-icon, and manifest icons all at once, rather than just one.

That accumulated history is also the reason getting it right isn't obvious anymore. What was once a single 16px file is now a small checklist of formats and sizes, each tied to a different browser or platform decision made over two and a half decades. A favicon generator exists precisely to produce that whole set correctly in one pass, and our favicon size guide exists to explain what each piece of it is actually for.