The 16×16 Favicon Story: Why Browser Icons Are So Small

Why 16×16?

The 16×16 pixel favicon size was not a careful deliberation — it was a practical constraint. In 1999, when Internet Explorer 5 introduced favicons, computer displays typically had 72–96 pixels per inch. Screen real estate was precious: Windows 95/98 taskbars, title bars, and menus all used 16×16 pixel icons. The Windows shell icon system standardised on 16×16 as the "small" icon size for menus and lists.

Microsoft implemented favicons using the ICO file format — the same format used for Windows application icons. The ICO format supported 16×16, 32×32, and 48×48 sizes. For browser bookmarks, where many icons would appear in a list, 16×16 was the natural choice: large enough to be recognisable, small enough to allow many items in a list without excessive vertical space.

The 16×16 constraint has persisted because of backward compatibility. Even as screens became higher-resolution, the favicon's role in the browser tab bar maintained its 16 CSS pixel display size. Higher-DPI displays (2x, 3x) now render the favicon at 32 or 48 physical pixels, but the CSS size — and the visual allotment in the tab bar — remained 16 pixels.

The Design Challenge: 256 Pixels of Canvas

Designing a recognisable icon at 16×16 pixels is a specialised discipline. A 16×16 grid has only 256 pixels — approximately the area of a postage stamp at screen resolution. At this scale:

• Fine detail is impossible — a single pixel is a significant design element
• Text is unreadable unless reduced to 1–2 characters in a very bold font
• Complex logos must be severely simplified or redesigned entirely
• Color gradients lose coherence — flat colors work better
• Anti-aliasing (soft edges) can turn a sharp design into an indistinct blur

The most effective 16×16 favicons typically use one of three strategies:

1. First letter: A single letter from the brand name, in a distinctive bold font, possibly on a colored background. Google's "G" favicon is the canonical example — immediately recognisable, works at any size.
2. Simplified mark: A brand's logomark (the symbol portion of a logo) simplified to work at pixel scale. Apple's apple, Twitter/X's bird, GitHub's octocat — all are marks that can be rendered recognisably at 16×16.
3. Distinctive shape: A geometric shape or color combination that provides a unique visual signature even without a recognisable brand mark. A solid color circle or square with a distinctive hue can be sufficient for small-scale recognition.

Pixel Hinting: The Art of Sub-Pixel Control

Professional icon designers for small resolutions use a technique called pixel hinting — manually adjusting the placement of curves, lines, and edges to align with pixel boundaries, ensuring that the icon renders sharply rather than with anti-aliasing blur.

Pixel-hinted icons are designed at 1:1 scale on a pixel grid (or at 2:1 or 4:1 for 2x and 4x rendering). Every line is positioned to fall exactly on pixel boundaries. Anti-aliasing — which smooths diagonal lines and curves by blending colors at the edges — is used judiciously rather than automatically. The goal is a crisp, readable icon rather than a smooth but blurry one.

This level of craft was more commonly applied to operating system icons (Windows, macOS) than to website favicons, which were often created by simply scaling down a logo and accepting whatever quality resulted. The difference in quality between a pixel-hinted favicon and a scaled-down logo can be significant at 16×16.

Multi-Resolution ICO Files

The ICO container format allows multiple image sizes to be packaged in a single file. A well-constructed favicon.ico typically contains:

• 16×16 — for browser tabs, bookmark lists, browser history
• 32×32 — for taskbar icons (Windows) and some high-DPI tab displays
• 48×48 — for Windows desktop shortcuts and some application icons

Each size is separately designed (or at least separately optimised) rather than being a scaled copy of the largest version. The 16×16 version may look quite different from the 32×32 — with different level of detail, different pixel hinting — because what works at 32 pixels does not necessarily work at 16.

Modern favicon generators create this multi-resolution ICO automatically from a single source image, applying size-specific optimisations. The quality of automatic generation has improved significantly — though hand-crafted pixel hinting for the 16×16 version still produces superior results for brands that require it.

The Size Problem Beyond 16×16

As favicons began appearing in more contexts — iOS home screens (114×114, then 152×152, then 180×180), Android home screens (192×192), Google's search results favicons (16×16 but displayed at varying scales), browser shortcuts (various sizes) — the need for size-specific design at each resolution became apparent.

The growth of favicon sizes illustrates a fundamental tension in icon design: a mark that works at 16 pixels may not work at 512 pixels, and vice versa. The most versatile approach is to design different versions of the mark for different size ranges, rather than expecting a single design to scale across the full range. SVG favicons (which are vector-based and scale infinitely) partially address this — but a vector design that works at every size requires more careful initial design than a raster design optimised for a single size.

Generate your favicon →