A Short History of the Favicon (from One 16×16 Icon to 8 Files) — Uttir Blog
Skip to main content
Uttir
· By Uttir min read

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. In 2026, a complete favicon setup is 8 files: a 16×16, 32×32, 180×180 (Apple), 192×192, 512×512 (PWA), a manifest.json, and a site.webmanifest. Here is the 27-year history and what you actually need today.

A complete favicon setup in 2026 is 8 files: favicon.ico (32×32), icon-16.png, icon-32.png, apple-touch-icon.png (180×180), icon-192.png, icon-512.png, site.webmanifest, and a <link rel="icon"> tag for each. The 16×16 ICO file from 1999 is still the only format every browser accepts. The 180×180 apple-touch-icon is required for iOS home screen. The 192/512 PNGs are required for installable PWAs. The Favicon Generator on this site produces all 8 from a single source image; the Image Resizer handles the dimension conversion.

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.

Further reading

Primary source: MDN — <link>: the element that declares a favicon.

Frequently asked questions

Is this free to use?
Yes. The tools and guides on Uttir are free to use, with no signup, no paywall, and no feature gating. There is no email gate, no trial period, and no premium tier. The site is supported by unobtrusive on-page ads that never interfere with the tool itself.
Do I need to sign up or create an account?
No. Uttir does not have accounts, login, or email signup. Open the tool or the post and use it.
Does this upload my data to a server?
Uttir processes your data entirely in your browser using JavaScript. Your text, files, and inputs are never uploaded to a server. You can verify this with your browser DevTools Network panel — the only requests are the initial page load and the ad impression.
What tool should I use after reading this?
The most relevant tool on Uttir for this is the Favicon Generator at /favicon-generator. Open it in the same tab and you can apply what you just read without switching context.
#favicon#web-development#history#design#branding

New tools and guides, once a week

One short email when something new ships. No tracking, no images, unsubscribe with one click.