Your favicon is the smallest piece of brand surface area you'll ever ship. It's also one of the most visited. Every customer who has your tab open sees it constantly. A bad favicon is a tiny daily reminder that your brand isn't quite professional. Most founders never look at it.
Here's why favicon design is harder than it looks and how to make yours actually work.
Why your logo doesn't work at 16 pixels
Take your full logo. The one with the wordmark, the mark, maybe a tagline. Shrink it to 16x16 pixels. You'll see one of three things: an unreadable blob, recognizable but blurry letters, or a piece of your logo (probably just the first letter or the symbol) that survived the shrink at the cost of everything else.
The problem is that at 16 pixels, you have approximately 256 pixels to work with. And many of them have to be background. The actual "ink" in your favicon is maybe 80 to 120 pixels. You can't fit a wordmark there. You can barely fit a single letter with detail.
The solution: don't try to fit your whole logo. Design a separate mark specifically for favicon use, derived from your brand identity but optimized for the constraint.
Three favicon design strategies that work
Strategy 1: The single letter. Pick the first letter of your brand name, render it in your brand typeface, optionally on a colored background. Examples: Notion (N), Linear (, ), Stripe (S). This works when the letter is distinctive in your brand typography and when one letter alone reads as "you."
This works if: your brand name starts with a memorable letter, your typography is distinctive enough to make one letter recognizable, you don't have a strong existing mark.
This doesn't work if: your brand name starts with a common letter (M, S, A) shared by many other brands in your category, or if your typography is generic enough that the single letter could be any brand.
Strategy 2: The mark, simplified. If your logo has a graphic mark (a symbol, an icon, an abstract shape), use just the mark as the favicon. Simplify it if needed. At 16 pixels, intricate detail disappears. Examples: GitHub (cat silhouette), Figma (color blocks), Apple (apple silhouette).
This works if: your mark is geometrically simple, distinctive at small sizes, and meaningful on its own without the wordmark.
This doesn't work if: your mark relies on fine detail, has thin lines that disappear when rasterized small, or only makes sense paired with the wordmark.
Strategy 3: The custom favicon shape. Design something specifically for the favicon that complements your brand but doesn't appear elsewhere. Examples: Slack (the colorful hashtag), Asana (three dots), Discord (the controller). The favicon is its own micro-logo, related to but separate from the main brand identity.
This works if: you have the design capacity to create something that feels brand-coherent, your brand mark doesn't translate to small sizes, you want to optimize the favicon specifically without compromising the main mark.
This doesn't work if: you don't have a clear design system to make the favicon "feel like you," or if it'll feel disconnected from the rest of the brand.
The technical setup that prevents stretched-logo embarrassment
Most stretched-logo favicons are an oversight, not a design choice. The fix is to provide multiple favicon files at different sizes, plus the right HTML tags so browsers pick the appropriate one.
The favicon files you should ship:
- favicon.svg. Your vector favicon. Modern browsers (90%+) prefer this. Scales infinitely.
- favicon.ico. Multi-resolution legacy format. Contains 16x16 and 32x32 PNGs inside. Old browsers and Windows shortcuts use this.
- apple-touch-icon.png, 180x180px. Used when someone adds your site to their iOS home screen.
- icon-192.png and icon-512.png. Used by Android home screen and PWA installs.
And the HTML tags in your <head>:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">If you skip the apple-touch-icon, iOS users who save your site to their home screen get a blurry screenshot of your homepage as the icon. It's a small detail but immediately visible to anyone who installs your site.
Testing your favicon
Three places to check your favicon after you publish:
- Browser tab. Open your site, look at the tab. Can you read it? Does it stand out among 10 other tabs?
- Pinned tab / shortcut. Save your site as a shortcut on your desktop, or pin it in the browser. Does it look intentional or stretched?
- iOS home screen. On your phone, share the site → Add to Home Screen. The icon that shows up should be your apple-touch-icon, not a screenshot.
If any of these fail, fix the underlying file. The whole stack should work without manual intervention from the customer.
The brand identity moment most founders miss
Your favicon will appear next to your customer's other browser tabs. Twitter, Gmail, your competitors. It's a small place where your brand stands or doesn't stand alongside others. Twenty years of brand work happens in those 16x16 pixels every time a customer keeps your tab open.
Worth 30 minutes of attention.
Your brand kit, ready in 10 minutes.
Five quick taps. Free preview before you pay.
Start building free →