Designing a favicon for a crypto project

For people who use your dApp every day, the favicon is your brand most of the time. It sits in a tab bar between their exchange, a block explorer and three other dApps, often pinned, often squeezed to a tab so narrow that the icon is the only thing left. It gets 16 by 16 CSS pixels to say which tab is yours.

This guide covers drawing a mark for that size, handling light and dark tab bars, the small set of files that covers current browsers and phones, and how to test the result where it actually appears.

What fits in 16 pixels

At 1x, a favicon is 256 pixels in total. On a 2x display it gets 32 by 32 device pixels, which helps, but many monitors are still 1x, so design for both.

Use the symbol, never the full logo. A wordmark at 16 px is a gray smear. If your logo is a lockup of symbol and wordmark, the favicon is the symbol. If you only have a wordmark, use its first letter as a bold, simple shape.

Keep every feature at least 2 px wide at 16 px. A 1 px line that doesn't land exactly on the pixel grid turns into two half-gray pixels and disappears into the tab color. Gaps need the same minimum, or they close up. The guide on designing icons for 16px goes deeper on minimum feature sizes, and pixel snapping on getting edges to land on whole pixels.

Two colors, three at most. Gradients, shadows and fine detail all turn to noise. Pick the one shape and color that people associate with your project and drop the rest.

Fill the square. The browser draws the favicon at 16 by 16 and adds no padding of its own. A mark with 3 px of padding on each side is effectively 10 px, and it looks smaller than the icons in the tabs around it. Leave a pixel of margin at most.

Don't borrow a coin or chain logo. If your project lives on Ethereum or Solana, it's tempting to put that logo in the tab. A tab bar with four Ethereum logos tells nobody which tab is which, and the logo is someone else's trademark. Your favicon should be yours.

Light and dark tab bars

Tab strips come in light themes, dark themes and colored custom themes, and the active tab usually sits on a different color from the inactive ones. A black mark disappears in a dark tab bar; a white one disappears in a light tab bar. There are two ways to deal with it.

Give the mark its own background. Draw the symbol on a filled rounded square or circle in your brand color. The icon then looks the same on every tab color, with no special support required. For most projects this is the right answer.

Switch colors inside the SVG. An SVG favicon can carry its own media query:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #14161c; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f2f4f7; }
    }
  </style>
  <path class="mark" d="M16 2 28 9v14l-12 7-12-7V9z" />
</svg>

This keeps a free-standing mark, but know its limits. The query follows the system or browser color scheme, not the actual color of the tab bar, so someone with a light system theme and a dark browser theme can get the wrong version. And only browsers that use the SVG favicon see it at all. The guide on SVG favicons covers support and fallbacks in detail.

The files to ship

A small set covers current browsers, older ones and phone home screens:

<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">

Browsers choose among rel="icon" links using the type and sizes attributes. Marking the ICO as a fixed 32 by 32 is meant to let browsers that can use the SVG prefer it, while the rest fall back to the ICO. Selection logic has differed between browsers and versions, Safari in particular, so treat this as a common pattern and verify it in each browser you support. Keep favicon.ico at the site root either way; browsers and other tools request that path even when no link points to it.

The apple touch icon needs different treatment from the tab icon. Give it an opaque background, keep the mark centered with generous padding, and leave the corners square: iOS rounds them itself. This is the one place your full symbol has room to breathe.

Producing the files

Draw the favicon on a 32 by 32 artboard, with edges on whole pixels, and check the 16 px rendering as you go; that same drawing becomes the SVG and the ICO. Export the apple touch icon from your full-size symbol instead, since it's displayed much larger.

From the command line, rsvg-convert (part of librsvg) renders SVG to PNG at exact sizes, and ImageMagick 7 packs PNGs into an ICO:

rsvg-convert -w 16 -h 16 favicon-artboard.svg -o icon-16.png
rsvg-convert -w 32 -h 32 favicon-artboard.svg -o icon-32.png
rsvg-convert -w 180 -h 180 touch-icon.svg -o apple-touch-icon.png
magick icon-16.png icon-32.png favicon.ico

Look at the 16 px PNG at 1x before you package it. If an edge is blurry there, it's blurry in every tab. Converting SVG to PNG covers other tools and the sizing pitfalls.

Test it in real tabs

A favicon judged on an artboard at 800 percent zoom tells you little. Test it where it lives:

• Every browser you support, each in a light and a dark browser theme.
• Active and inactive tabs, which usually have different background colors.
• A pinned tab, where the favicon is the only thing shown.
• Twenty open tabs, so tabs shrink to icon width. Can you find yours in under a second?
• The bookmarks bar, history and the address bar's suggestions.
• "Add to Home Screen" on an iPhone and an Android phone.

Browsers cache favicons aggressively and separately from the page. When you test a change, use a private window or a fresh browser profile. When you ship one, change the file name or add a version to the URL, such as /icon.svg?v=2, so returning visitors see it.

One last point specific to crypto: a favicon proves nothing. Phishing sites copy favicons along with everything else, so never tell users that seeing your icon means they're on the real site. It's there to help people find your tab, not to verify it.