A Short History of the Favicon (from One 16×16 Icon to 8 Files)

The favicon started as a single 16×16 ICO file in 1999, when Internet Explorer 5 decided to show a small icon next to the title in the Favorites menu. The name came from "favorite icon," shortened to favicon. In 2026, a complete favicon setup is 8 files: a 16×16, 32×32, 48×48, 180×180 (Apple), 192×192, 512×512, a site.webmanifest, and a handful of link tags. Here is the 27-year history of how we got from 1 file to 8, and what you actually need today.

1999: The first favicon (IE5)

Internet Explorer 5 added a 16×16 icon to the Favorites menu and the address bar. The format was ICO, a Microsoft-specific container that could hold multiple sizes in one file. The single 16×16 ICO file was the favicon for almost 10 years. Browsers would request /favicon.ico automatically and display it in the tab, the bookmark list, and the address bar.

For most of the 2000s, the favicon was a single file, written once, and never touched again. The icon was a 16×16 ICO file, often 1-2 KB, embedded in the root of the site. No link tag was needed because the browser requested the file by convention.

2007: The Apple touch icon

When the iPhone launched in 2007, Apple needed an icon for the home screen when a user added a website to their home screen. Apple used a different format: a 57×57 PNG, served from a specific path (/apple-touch-icon.png) or referenced by a specific link tag (<link rel="apple-touch-icon" ...>). The Apple icon was 57×57 with rounded corners applied by the OS.

Apple has updated the size several times: 57×57 (iPhone, original), 72×72 (iPad), 114×114 (Retina iPhone), 144×144 (Retina iPad), 152×152 (iPad Pro), and currently 180×180 (Retina iPhone, modern). The 180×180 is the standard in 2026. The OS still applies the rounded corners, so the source PNG can be a flat square; the OS will round it.

2010: The PNG icon (Chrome, Firefox, Safari)

Chrome, Firefox, and Safari started supporting PNG favicons. The benefit: PNG supports transparency, which the ICO format did not (the original ICO format was a flat 16-color palette; the later 32-bit ICO supports transparency but is poorly supported). The new convention: serve a 32×32 PNG from /favicon.png or via a <link rel="icon" type="image/png" sizes="32x32" href="..."> tag.

By 2010, the typical favicon setup was 2 files: a 16×16 ICO for legacy browsers, and a 32×32 PNG for modern browsers. The link tag was the recommended way to reference them, with the ICO as a fallback for browsers that did not support the link tag.

2014: The SVG icon (Chrome, Firefox, Safari)

Chrome, Firefox, and Safari started supporting SVG favicons. The benefit: SVG is a vector format, so the icon scales to whatever size the browser needs (16, 32, 64, 128) without losing quality. A single SVG file replaces the 16×16, 32×32, 48×48, 64×64 PNGs that the high-DPI displays required.

The SVG icon is not universally supported — older browsers and some embedded browsers still need the PNG/ICO fallbacks. But for a modern site, the SVG icon is the primary and the PNG/ICO files are the fallbacks.

2015: The PWA manifest icon (192×192, 512×512)

When Progressive Web Apps (PWAs) became a thing, the install prompt needed two specific icon sizes: 192×192 (for the install UI) and 512×512 (for the splash screen). The icons had to be referenced in a manifest.json file (now typically site.webmanifest by convention) with the purpose: "any maskable" annotation for icons that needed to be cropped to a circle or rounded square by the OS.

The 192×192 and 512×512 PNGs are required for any site that wants to be installable as a PWA. For sites that do not, they are still useful for the high-DPI versions of the regular favicon.

2017: The dark mode icon (Safari, Chrome)

When dark mode became a thing, Safari and Chrome started supporting a prefers-color-scheme media query for the favicon. The use case: a dark-mode browser shows the same favicon on a dark tab background, which can be hard to read if the favicon is dark on a dark background. The fix: a <link rel="icon" media="(prefers-color-scheme: dark)" href="..."> tag that switches to a light-mode version of the icon when the browser is in dark mode.

The dark-mode favicon is an optional refinement. Most sites do not need it. The 16×16 and 32×32 dark-on-light icons are still readable on a dark tab background, and the OS does not invert them.

2021: The web app manifest icon (any size)

Chrome and Edge started supporting arbitrary sizes in the web app manifest. The use case: a site that wants a specific icon for a specific context (e.g., a 96×96 for the Windows taskbar, a 150×150 for the macOS dock, a 192×192 for the Android home screen). The manifest can declare multiple sizes, and the OS picks the one that fits.

The arbitrary-size manifest is optional. The 192×192 and 512×512 are the only ones the OS will request for a PWA install. The others are for desktop OS integration (taskbar, dock) and are nice-to-have.

2026: What you actually need

For a modern site in 2026, the minimum complete favicon setup is 8 files and 4 link tags:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

And the files: favicon.ico (32×32), icon.svg (scalable), apple-touch-icon.png (180×180), icon-192.png (192×192), icon-512.png (512×512), site.webmanifest. Six files total, not eight (the favicon.ico replaces the 16×16 PNG, and the icon.svg replaces the 32×32 PNG in modern browsers).

The 16×16 PNG is no longer required because the 32×32 ICO is sharp on both standard and high-DPI displays. The 48×48 PNG is no longer required because the SVG handles arbitrary sizes. The 57×57 Apple touch icon is no longer required because the 180×180 works on every Apple device.

What you can skip

You can skip the dark-mode favicon unless you have a brand that depends on the icon being readable in dark mode. You can skip the arbitrary-size manifest icons unless you are a PWA that needs desktop OS integration. You can skip the 16×16 PNG if you have a 32×32 ICO. You can skip the 32×32 PNG if you have an SVG.

The Favicon Generator on this site produces the minimum complete setup: the 6 files, the 4 link tags, and the site.webmanifest. The Image Resizer handles the dimension conversion from a single source image. The WebP Converter handles the format conversion. The whole thing takes 5 minutes once you have a source image.

The honest summary

The favicon started as a single 16×16 ICO file in 1999. In 2026, a complete setup is 6 files: a 32×32 ICO (for legacy), an SVG (for modern), a 180×180 PNG (for Apple), a 192×192 PNG and a 512×512 PNG (for PWA), and a site.webmanifest. The 4 link tags reference them. The setup is small (under 50 KB total) and takes 5 minutes with the right tool. The Favicon Generator on this site produces the whole thing from a single source image; the Meta Tag Preview shows how the icon will look in a search result. The history of the favicon is a 27-year arc from one file to six, driven by the need to support retina displays, dark mode, PWAs, and Apple devices. The minimum viable setup in 2026 is still small; the maximum is unbounded.