Sixteen Pixels of Nerve: Making the Favicon Earn Its Keep

You can spend three months on a wordmark — kerning it, re-kerning it, arguing about the ampersand — and then a visitor's first encounter with your brand is a 16-pixel square that looks like a crumb on the screen.

That square is the favicon. It is the least glamorous item in the brand kit and, by sheer repetition, probably the one your customers see most. It sits in the tab while they read, in their bookmarks once they have gone, and in the history list when they are trying to find you again on a Tuesday morning.

Most brand work treats it as an afterthought: shrink the full logo, cross fingers, ship. That is why so many tab bars look like confetti.

The smallest asset, seen the most

Think about how people actually browse here. A commuter on a Northern service with eleven tabs open, half of them pinned. Someone in a Leeds office with their inbox, a supplier portal, a spreadsheet and your site all competing for one strip of grey. A student on a five-year-old Android whose screen renders subtlety as mush.

The tab is a hostile environment. It is tiny, it is surrounded by noise, it is often viewed from a metre away, and it might be dark. A detailed mark with a gradient and a strapline — yes, people still try the strapline — has no chance.

That is the case for a one-line favicon. Not because minimalism happens to be in fashion, but because a single stroke is roughly the maximum amount of information that survives the journey.

What sixteen pixels does to a line

At 16×16 you have 256 pixels to play with. A one-pixel stroke is the thinnest thing that can exist, and even that can vanish once a browser scales it or an operating system rounds it. Thicken it and the shape fills in; thin it and it flickers. The line has to live in a narrow corridor.

A few working rules:

• One idea, drawn once. If your mark needs a second shape to make sense, the favicon is not the place for it.
• Draw for the size, not down from the size. Do not shrink the master logo. Redraw the concept on a 16 and 32 unit grid, then check that it still feels like the same family.
• Bold beats delicate. Weep at 16, redraw at 16.
• Keep the silhouette roughly square. Circular marks get clipped by rounded tab shapes; long thin ones become a smudge.
• No lettering. Two letters at 16 pixels become one grey blob with pretensions.

A checklist worth actually running

This is the bit most studios skip. It takes about twenty minutes and it will save you a redraw six months later.

Squint at it

Blur the view or step back until the mark is barely identifiable. If you cannot tell which way the line runs, nobody else can either.

Strip the colour

Convert to greyscale. Colour is doing less work than you think in a tab bar, and a mark that only exists in your brand blue is a mark that disappears in a competitor's bookmarks.

Count the contrast

The WCAG guidance on non-text contrast asks for at least 3:1 between adjacent colours. Aim higher — 4.5:1 — because browser chrome eats nuance. A pale mint line on a white tab is not brave, it is invisible.

Put it in a busy tab bar

Mock it up next to the BBC, GOV.UK, your bank and three tabs of the same document. If it holds its own there, it will hold its own anywhere. Test at 100% zoom on a 13-inch laptop, which is where most of your traffic lives.

Check it in the dark

Windows and macOS both switch browser chrome to dark mode, and plenty of UK users leave it there all winter. An SVG favicon can respond to prefers-color-scheme, giving you a light line on light chrome and a pale one on dark. If you would rather not, pick a mid-tone that works on both and stop worrying.

Look at it on a cheap screen

Borrow the oldest phone in the studio. Retina displays flatter everyone; a 2019 handset in bright daylight does not.

It is not only the tab

A favicon is now a small family of files, and each one has a job:

• favicon.ico at 16 and 32 for legacy and RSS readers.
• A 32×32 PNG for browsers that prefer it.
• A 180×180 apple-touch-icon for the home screen — this one gets rounded corners, so keep the line away from the edges.
• A 512×512 maskable icon for Android, with the essential shape inside the safe zone.
• An SVG favicon for modern browsers, which stays crisp at any size and can carry a dark-mode variant.
• A 48×48 multiple if you want a decent showing in Google's mobile results.

One drawing, six exports. That is the whole discipline.

Why this counts as trust

A blurry favicon is a small signal, and small signals add up. Before anyone reads a word of your homepage, they have already registered whether the tab looks cared for. A crisp line says someone was paying attention at the last five per cent of the job — which is where most of the quality lives anyway.

It is the same instinct that makes a neatly cut hinge on a kitchen cabinet feel expensive. Nobody mentions it. Everybody notices.

The version we would ship

One stroke, drawn at 16 and 32, thumped into a shape that survives a rounded corner, tested in greyscale, tested on a bad screen, exported six ways, and left alone.

If your mark cannot survive that, it is not a favicon problem. It is an idea problem — and better to find out now, on a 16-pixel square, than on a billboard in Birmingham.