All articles

Favicon: why a single icon needs so many sizes and formats

The favicon has a specific birthday: Microsoft introduced it with Internet Explorer 5 in 1999, letting webmasters drop a favicon.ico in the site root and have it show up next to the URL. Nearly three decades later, that one file is no longer enough on its own.

Why .ico is a container, not just an image format

Unlike a PNG, a single .ico file can bundle several bitmap resolutions together — 16x16, 32x32, 48x48 — and the browser or OS picks whichever one fits the context. That's a direct legacy of the format predating high-DPI screens, when one icon had to cover a taskbar entry, a shortcut, and a browser tab all at once.

Apple's own convention: the apple-touch-icon

iOS never adopted favicon.ico for home-screen icons. Instead Apple introduced its own non-standard <link rel="apple-touch-icon"> tag, expecting a 180x180 PNG with no transparency — iOS adds its own rounded corners and, on newer versions, a subtle shine effect on top of whatever image is provided.

The web app manifest for installable sites

Android Chrome instead reads site.webmanifest, a JSON file listing icons up to 512x512 alongside a name, background color, and theme color — that's what appears on the home screen and splash screen when a site gets installed as a standalone app.

Why you'd need this

  • Generate a complete set of icons in the required sizes from a single source image.
  • Get ready-made <link> tag HTML to paste into <head>.
  • Make sure the site looks right when added to a mobile device's home screen.
Try the tool