Favicon

A favicon is the small icon that sits in the browser tab beside the page title. It also appears in bookmarks, reading lists, browser history, and when a visitor saves your site to their mobile home screen. The standard canvas is 16x16 or 32x32 pixels. At 16x16, you have exactly 256 pixels to work with. That is the entire brand surface. Everything your logo spent years building has to survive at that scale, or it does not survive at all.

The word comes from "favorites icon," which is what Internet Explorer called it when Microsoft introduced the feature in 1999. The file lived at the root of the domain as favicon.ico, and browsers fetched it automatically. The format has evolved. Modern implementations include PNG and SVG variants, a 180x180 Apple touch icon for home screen saves, and sometimes a manifest-linked icon set for Android. The core idea has not changed in 25 years: one tiny image, one big first impression.

The most common mistake is treating the favicon like a shrunken logo. It is not. Scaling a wordmark to 16x16 produces illegible mush. The favicon is a separate design problem. Not a scaling exercise. A reduction exercise. You are not making the logo smaller. You are distilling the brand to its minimum recognizable unit, the thing that survives when everything decorative has been stripped away.

Designers sometimes confuse the favicon with the logomark, and the relationship is real but not interchangeable. A logomark is the icon form of a brand, typically used at sizes where visual detail still reads, from 24px up through 200px and beyond. The favicon is what happens when you push further, past the point where detail survives, to the point where only silhouette, shape, and color remain. Some brands use the logomark as the favicon without modification. Some should not.

Slack is the canonical favicon that works. At 16x16, the four-colored hashtag-like symbol stays legible because the shape is geometric and the internal color contrast is high. When Slack redesigned its mark in 2019, part of the backlash focused on exactly this: the new version reduced the visual separation between the colored paddles. At 512px the change read as refined. At 16px it read as muddy. The redesign survived, but the favicon tension was real and the criticism was legitimate.

Twitter, now X, swapped its favicon from the blue bird to a white X on black in 2023. The bird worked at small sizes because it was a simple, high-contrast silhouette with no fine detail to lose. The X also works, for different reasons. It is geometrically bold, equally legible, equally ownable. Both pass the favicon test, which is not about beauty. It is about identity survival at 16 pixels wide.

Every site needs a favicon. No exceptions. A missing favicon forces the browser to display a generic page icon or a broken image indicator. That is a branding failure at the first pixel the user sees, before they read a word of copy. The favicon earns its keep most on sites users return to repeatedly: SaaS tools, publications, communities, anything with a bookmarked or pinned tab. If someone is running 30 browser tabs, your favicon is the only thing distinguishing you from the other 29.

Where designers lose time: trying to compress the full logo into a 32x32 pixel grid. If your brand mark is a wordmark or a complex illustrative symbol, the favicon cannot be a scaled version of it. It should be a logomark if one exists, or a purpose-built small-format mark: a monogram, a single letterform, a geometric reduction. Nike's favicon is the swoosh. Apple's is the apple silhouette. Neither company is trying to fit their wordmark into a square. They already had a mark that survives compression. If your brand does not have that yet, the favicon project is actually a logomark project in disguise.

One tradeoff worth naming: the favicon and the Apple touch icon serve different contexts but often share the same asset. The touch icon renders at 180x180 with a rounded corner mask applied by iOS. A design that reads at 16x16 can look sparse at 180x180. Many brands solve this with a slightly different version: more padding, a colored background, a version of the mark with more breathing room. The investment is small. The payoff is a home screen presence that looks intentional, not accidental.

The favicon is not a detail you finesse after launch. Browsers cache it aggressively. Users notice its absence faster than its presence. Get it right before the site goes live and you will never think about it again.

A favicon is the brand's passport photo: you are barely visible, everyone judges you anyway, and not having one means you do not exist.