Sixteen Pixels of Trust: Auditing the Brand Marks Nobody Designs on Purpose

You can usually tell a brand has never thought about its favicon within about half a second. It is the tab you cannot pick out of twelve, the bookmark that reads 'favicon (2)', the grey blob on a phone home screen. Nobody emails in about it. But it sits in a customer's peripheral vision for hours at a time, quietly doing brand work that your hero banner never gets a look at.

What follows is a short audit you can run in an afternoon. Most of that afternoon will be spent exporting files, which tells you something about where the effort really sits.

Where the tiny logo actually turns up

Worth listing, because the list is longer than most people assume:

• Browser tabs, at 16×16 or 32×32 depending on the display
• Pinned tabs in Chrome and Edge, where the icon becomes the only identifier — the page title disappears completely
• Pinned tabs in Safari, which pulls the touch icon rather than the favicon
• Bookmark bars and bookmark manager tiles
• Google search results, next to your domain name on mobile
• Android home screen shortcuts and installed web apps
• iOS home screen bookmarks, which use the Apple touch icon
• Link unfurls in Slack, Teams and WhatsApp
• Password managers, which increasingly display site icons in the vault

Each of those has different technical requirements. Most small brands ship one 32×32 PNG and hope for the best.

A wordmark at 16px is a rumour, not a logo

Do the arithmetic once and you will never design a favicon wordmark again. A 16×16 grid gives you 16 pixels across. A five-letter wordmark leaves each letter just over three pixels. Three. You are not rendering type at that size, you are rendering a texture.

Even on the larger sizes used by high-density screens, a wordmark competes with whatever is happening in the tab strip around it. For nearly every small brand the honest answer is a monogram, a single glyph, or a distinctive silhouette lifted out of the mark — the shape of the thing, not the name of it.

If you cannot bear to split the symbol from the wordmark, crop to the symbol and check the crop still reads as yours. If it does not, that is a brand-asset problem worth knowing about, and better found now than halfway through a pitch.

Test the silhouette before you test the detail

Three checks, all free, all quick:

The squint test. Export at actual size and squint. If the form collapses into a shapeless blob, refine the form rather than adding detail.

The one-colour test. Fill the whole icon with a single flat colour. If it stops being recognisable, the design is leaning on something that will not survive.

The tab-strip test. Open ten sites, screenshot the strip, shrink the screenshot to half size. Can you still find yours without reading anything?

Light chrome, dark chrome, and the drab grey in between

Your favicon does not sit on white. It sits on whatever the browser decided, and that changes with the operating system theme, the browser theme and the user's own settings.

Chrome on Windows defaults to a pale, slightly drab tab strip. Safari in macOS dark mode goes close to black. Edge has its own palette, Firefox can be almost anything depending on the Linux theme. A pale mark on a transparent background vanishes in light mode. A dark mark vanishes in dark mode. The design that fails is usually the one that looked fine on the designer's machine.

Two approaches that hold up. First, give the icon its own container — a filled shape with the contrast built in, so the surrounding chrome stops mattering. Second, ship an SVG favicon with an embedded colour-scheme query, which current browsers respect, and keep a solid-background PNG for the ones that do not.

What to export in 2026

A working set, not a wish list:

• favicon.svg — scalable, with a dark-mode variant if your mark needs one
• favicon.ico — containing 16×16, 32×32 and 48×48; still worth the twenty seconds
• 96×96 and 144×144 PNGs — Google's mobile search results want a favicon that is a multiple of 48px square
• apple-touch-icon.png at 180×180 — opaque, no transparency, artwork inset slightly because iOS applies its own rounded mask
• 512×512 maskable PNG — for Android shortcuts and installed web apps, with the meaningful content inside a central safe zone so a circular crop does not eat it
• A 1200×630 social card — not a favicon, but the same design decision at a larger size

Keep the source file somewhere obvious. In eighteen months somebody will need a 256px version of it for something nobody has invented yet.

The cache will fight you

Icons are cached hard, sometimes for weeks, and sometimes in ways that ignore your headers entirely. The reliable fix is to change the filename — favicon-v2.svg — and update the link tags to match. Do not lose a morning debugging a new icon that is not appearing when the real answer is that an unreachable cache is still serving the old one.

The twenty-minute audit

1. Export at 16×16 and look at it at actual size, not zoomed in
2. Screenshot it in a light tab strip and a dark one
3. Pin the tab and check it with no title text to help you
4. Add it to the bookmarks bar and look at the tile
5. Check it beside your domain in a mobile Google result
6. Check the iOS home screen icon for transparency artefacts
7. Check the Android maskable icon inside a circular crop
8. Confirm the ICO contains all three sizes
9. Rename the file and update the tags
10. Ask someone who does not work with you to find your tab in a strip of ten

That last one is the real test, and it costs nothing. If they cannot find you in a row of ten tabs, the icon is not finished — no matter how good the full-size version looks in the brand guidelines.