Favicon design: tiny icons that still look like you

A favicon is the small square icon that stands for your website in browser tabs, bookmarks, history, phone home screens and Google results. It is often shown at just 16 or 32 pixels, so good favicon design is ruthless: one bold shape or letter, high contrast, no fine detail. Technically you need only a handful of files, a 32×32 ICO, an SVG, a 180×180 Apple touch icon and two manifest PNGs, plus a few lines of HTML.

Favicon sizes and files you actually need

Old guides list twenty sizes. Modern browsers resize well, so a short set covers every place a favicon appears. This follows the approach recommended on web.dev for manifests and current browser behaviour for the rest.

Google Search also shows favicons beside results. Its favicon guidelines ask for a square icon, recommend one larger than 48×48 pixels, and say it should represent your brand. The 192 and 512 PNGs both qualify; check that page before launch, because Google revises it.

How to add a favicon to your site

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

{
  "name": "Studio Nine",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

Designing a favicon that reads at 16 pixels

At 16 pixels you have 256 dots. A full wordmark becomes a grey smudge, thin strokes vanish and two similar colours merge. The favicons people recognise instantly are almost always one of three things: a single letter, a simple symbol, or a solid shape in a distinctive colour.

Colour and gradients in a tiny icon

Colour does more work than shape at this size, because it is what people scan for along a row of tabs. A recognisable brand colour beats a clever symbol. Gradients can work if they are bold and short: two stops with a clear difference in lightness read as a lit surface, while a subtle multi stop blend just looks muddy at 16 pixels.

If your brand already has a signature background, a crop of it can make a distinctive favicon tile. Gradiently Marks are useful here: the same look that runs behind your posts can sit behind a single letter at 512×512, so the tab and the feed feel like one brand. Make sure the letter keeps strong contrast against the tile, as covered in logo on gradient background.

Dark mode favicons with SVG

A black icon disappears on a dark tab bar, and a white one on a light bar. Because an SVG favicon is a little document, it can carry its own media query and switch colours with the browser's theme.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1e1b4b; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e7ff; }
      path { fill: #1e1b4b; }
    }
  </style>
  <rect width="32" height="32" rx="7"/>
  <path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>

A solid tile behind the symbol is the simplest insurance: it reads on any background, light or dark, without relying on the media query. SVG vs PNG explains why the vector file is the one to keep.

A quick favicon checklist

1. 1

   Start from your logo's simplest part

   A monogram, the first letter or the symbol alone. Logo variations covers building a small version on purpose.

2. 2

   Draw it at 32×32 first

   Design on the small grid and scale up, not the other way round. Thick strokes, generous gaps.

3. 3

   Export the five files

   ICO at 32×32, SVG, 180×180 Apple touch icon, 192 and 512 manifest PNGs.

4. 4

   Test in real tabs

   Open your site next to ten others, in light and dark themes. If you can't find your tab in a second, simplify.

The favicon sits beside your Open Graph image and social profile pictures as the small, constant signals of a brand. Keep them consistent, and see logo sizes for the full kit.