Favicon design tips: an icon that reads at 16 pixels

A favicon has 256 pixels to say who you are. Here's how to spend them.

A good favicon is one shape, two colours, no text, on a solid background, and it looks the same at 16 pixels as it does at 512. That's the whole brief. Everything below is detail: why each rule exists, how to test, and what happens to your icon on Square Town (square.pov.town), the $1 favicon wall (how it works), where it sits at 1×1 next to hundreds of other icons and, in 3D, becomes a tower tinted with its own dominant colour.

TL;DR — Design for 16×16 first and scale up. One recognisable silhouette. Contrast against both white and near-black. No wordmarks, no thin lines, no gradients that die at small sizes. Solid or clearly-shaped background so it doesn't vanish on a dark tab bar. Ship a 32×32 PNG at minimum, ideally an SVG plus PNG fallbacks. Test with https://www.google.com/s2/favicons?domain=yourdomain.com&sz=64 — that is exactly what Square Town (and a lot of the web) will show.

Design at 16 pixels, not 512#

Most bad favicons are good logos shrunk. A logo is designed for a business card or a hero banner; a favicon is designed for a browser tab, a bookmark bar, a history list, and — on Square Town — one cell of a wall. At 16×16 you have 256 pixels. A stroke thinner than one pixel becomes a smear; two similar colours become one; a word becomes lint.

So start small. Open a 16×16 canvas (or a 32×32 one and squint) and draw the thing that is unmistakably you at that size. Then, if you want, draw the luxurious 512×512 version for app icons and social cards. The small one is the constraint that matters; the big one is a treat.

One shape, and it should be a silhouette#

The test: fill your icon in a single flat colour. Can you still tell what it is? A good favicon survives being a silhouette because at 16 px that's roughly what it becomes anyway. Letters work if it's one letter, bold, filling the box. Symbols work if they're chunky. Mascots work if the outline is distinctive (a fox's ears, a bird's beak) rather than the face detail.

Two shapes is a stretch. Three is noise. If your logo is a wordmark, your favicon is the first letter or an abstract mark that shares its colour — not the wordmark.

High contrast, tested against light and dark#

Your icon will sit on a white tab bar in one browser and a near-black one in the next. On Square Town each icon is drawn on a small tile that's white in light mode and near-black in dark mode, and the wall's sun follows the viewer's local time of day, so at night everything's dimmer. Design for both:

• Prefer a solid, saturated background with a light foreground, or a strong dark shape on white. A dark navy mark with no background disappears on a dark tab bar; a white mark with no background disappears on a light one.
• If you must go transparent, give the shape a 1-pixel contrasting outline or a filled circle behind it.
• Avoid mid-tone greys as the main colour. They're invisible on both light and dark, and (see below) they give Square Town nothing to work with.

Check both extremes explicitly. Put the 16 px PNG on #ffffff and on #111111 and look at it from arm's length.

No text, no thin lines, no fine gradients#

Text: at 16 px a four-letter word is 4 px per letter, which is not a letter. One initial is the exception, and only if it fills the box. Thin lines: anything under 2 px at 32×32 (1 px at 16×16) will anti-alias into fog. Make strokes chunky and even. Gradients: a subtle gradient across 16 pixels is a flat colour with extra bytes; a strong gradient turns your icon into two colours fighting. Flat is fine. Flat is good.

Similarly, drop shadows, glows and 3D bevels are 2009. They cost pixels you don't have and they muddy the silhouette. If you want depth, Square Town will give your icon a whole tower.

Solid background, or a shape with a definite edge#

The tab bar isn't the only place your favicon appears. Bookmark managers, reading lists, link previews, share sheets, RSS readers and every favicon wall put it on some background you don't control. A rounded square or circle of solid colour behind the mark is the most reliable framing there is — that's why so many app icons look like that. On Square Town, icons are drawn on a small tile; a solid background makes yours a crisp coloured stamp, a transparent one makes it a floating shape on the tile colour, which is fine but less bold.

Also, corners: many renderers round or pad icons (Square Town draws each icon inset on its tile; browsers vary). Don't put important detail in the outer 1–2 pixels.

Ship the right files#

Minimum: a 32×32 PNG at /favicon.ico or linked with <link rel="icon">. Better: an SVG (<link rel="icon" href="/icon.svg" type="image/svg+xml">) with PNG fallbacks at 32 and 180 (apple-touch-icon) and a 512 for manifests. The mechanics of where to put these are in how to add a favicon.

SVG favicons can respond to the user's colour scheme with an embedded style: <style>@media (prefers-color-scheme: dark) { .mark { fill: #fff } }</style>. That's great for tab bars. Just remember that most third-party consumers — favicon services, walls, link previews — rasterise the SVG once without a colour scheme, so the default (light-scheme) styling is what they'll show. Make sure that version stands on its own, and don't rely on the dark variant to save an icon that only works on black.

What Square Town does with your icon#

Square Town doesn't accept uploads. You paste a URL, and the wall fetches your favicon through Google's favicon service (https://www.google.com/s2/favicons?domain=…), proxied at 128 px for the WebGL wall and shown at 64 px in the little card that opens when someone clicks your square. If Google's service has no favicon for your domain (it answers 404), you get a 🤡 on your square and a place in the public Hall of Clowns until you add one and press "I fixed my favicon". Details in Hall of Clowns: sites without favicons.

Two consequences for design:

1. Google's copy is what counts. The service caches; after you change your icon it can take a while to update, and it picks the icon it likes from your <link> tags. Check the URL above with &sz=64 and &sz=128 and design for what comes back.
2. Your dominant colour becomes your tower. In the 3D view (ctrl+drag) every favicon is a tower whose height is its click count and whose sides are tinted with the icon's dominant chromatic colour — pixels are binned by hue and weighted by chroma, so a blue icon with white and black detail still reads as blue. Grey, black and white icons have no hue to borrow, so they get a neutral slate whose lightness follows the icon (dark icon → dark tower). If you want a red tower, be red. If you want to blend into the skyline, be grey.

That colour rule is a decent design test in itself: if a hue-weighted sampler can't decide what colour your icon is, a human at 16 px probably can't either.

How to check yours in 30 seconds#

1. Open https://www.google.com/s2/favicons?domain=yourdomain.com&sz=64 in a tab. If it's a generic globe or a 404, you have no favicon that the wider web can see — fix that first.
2. Zoom the browser out until that image is roughly 16 px wide. Still recognisable? Still you?
3. Save it, put it on white and on #111 in any image editor. Contrast fine on both?
4. Look at your tab bar next to ten other tabs. Does yours pop, or does it look like three of the others?
5. Optional: buy a $1 square on square.pov.town — click an empty cell, paste the URL, pay — and see how it looks on a wall of strangers, and what colour your tower comes out. If it's grey and you weren't going for grey, you have your answer. (Where to put it: how to pick a good square.)

A short table of do and don't#

FAQ#

What size should a favicon be designed at?#

Design at 16×16 or 32×32 first, then scale up. Ship at least a 32×32 PNG, ideally an SVG plus PNG fallbacks (32, 180 for Apple touch, 512 for manifests).

Should a favicon have text?#

No, apart from a single bold initial that fills the box. Words are unreadable at 16 px and turn into noise on any wall of icons.

Do I need a solid background?#

Not strictly, but it's the safest choice: it guarantees contrast on white and on dark tab bars, and on Square Town it makes your square a crisp coloured stamp rather than a floating shape.

How does Square Town choose the colour of my 3D tower?#

It samples the favicon client-side and finds its dominant chromatic hue (weighted by chroma, so white/black detail doesn't dilute it). Grey, black or white icons get a neutral slate whose lightness follows the icon.

Can I upload a different image to Square Town instead of my favicon?#

No. Square Town is URL-only; it fetches the favicon via Google's favicon service. If your site has no favicon you get a clown until you add one, and there's an "I fixed my favicon" recheck button.

Will an SVG favicon with dark-mode styles work everywhere?#

In tab bars, mostly yes. Third-party consumers — favicon services, walls, previews — usually rasterise the default styling once, so make sure the light-scheme version works on both light and dark backgrounds on its own.