Your logo's largest appearance is probably your homepage hero. Maybe 240 pixels wide. Memorable, polished, attention-deserving. Your logo's smallest appearances. And there are dozens of them. Happen at 24 to 32 pixels. iOS notification icons. Slack workspace icons. Discord server thumbnails. Browser tabs. App-switcher previews. Apple Watch app icons.
Most logos are designed for the large case and squeezed into the small one. The squeeze fails predictably. Here's how to design for small from the start, plus how to retrofit an existing logo that doesn't work at 24 pixels.
What breaks at small sizes
Three failure modes specific to tiny logo contexts:
1. Detail disappears. Thin lines, fine details, internal counter-spaces in letters. All vanish below ~32 pixels. The logo becomes a blob if it relied on detail to communicate.
2. Letters become unreadable. Wordmark logos that work great at 200 pixels become illegible blurs at 24 pixels. Even your brand name can't survive at the tiniest sizes.
3. Contrast collapses. Subtle gradients, low-contrast color combinations, soft shadows. All become muddy at small sizes. The mark loses definition against its background.
If your logo has any of these failure modes, your brand has weak small-size moments.
The two-mark system
The fix isn't to make your large logo smaller. It's to design (or commission) a second mark specifically for tiny contexts. Most professional brand systems have both:
- Primary logo: what appears on the homepage, business cards, anywhere with space. Includes the wordmark, the mark, sometimes a tagline.
- Small-size mark: what appears at 24-64 pixels. Usually just the graphic mark, simplified, optimized for tiny rendering.
The small-size mark is derived from the primary but isn't a copy of it. It's the primary translated for small sizes.
Examples that do this well:
- Stripe. The full Stripe wordmark at large sizes. Just the "S" curve at small sizes (favicon, app icon).
- Mailchimp. Mailchimp wordmark at large. Just Freddie the chimpanzee head at small.
- Notion. Notion wordmark at large. The "N" symbol at small.
In each case, customers recognize the small mark as the brand because they've learned the system. The primary logo establishes the connection; the small mark inherits it.
Designing your small-size mark
If you don't have one yet, here's how to design or commission one:
Step 1: Pick the element of your primary that survives shrinking. Most primary logos have a graphic mark (a symbol) separate from the wordmark. The graphic mark is usually the right starting point for the small-size mark. If your primary is wordmark-only, the small-size mark usually becomes the first letter or a simplified version.
Step 2: Simplify ruthlessly. At 24 pixels, you have approximately 576 pixels to work with. Subtract pixels needed for visible padding (a logo touching the edges feels cramped) and you have maybe 300-400 pixels for the actual mark. Internal detail at this scale becomes mud. Remove it.
If your primary mark has, say, four internal shapes, your small mark might have one or two. The relationships between shapes that read at 240 pixels become indistinct at 24 pixels. Test at the target size, not at the design size.
Step 3: Increase contrast. A subtle 5% color difference at 240 pixels becomes invisible at 24. Either increase the contrast for the small mark or move to solid colors only. Many small marks are single-color (a single solid shape) precisely because subtle contrasts can't survive.
Step 4: Test at the actual contexts. Export your small mark at the sizes it'll appear (typically 16, 24, 32, 64, 128 pixels). Place each on the actual contexts: browser tab, iOS home screen, Slack workspace, Discord. Look at each in context, not just in isolation.
Most marks that look fine in an isolated test fail at one or two contexts. Common failures: pixel hinting issues at exactly 16x16 (the favicon size), color rendering issues on the iOS home screen background, contrast against Discord's gray sidebar.
Step 5: Define the rules for use. Document when to use which mark. Above what size threshold does the primary logo work? Below what size does the small mark take over? Most brands set this at 48 or 64 pixels. Primary above, small mark below.
The favicon-specific considerations
Favicons are the most demanding small-mark context because:
- They render at exactly 16x16 or 32x32, with no opportunity to use a larger original
- They appear next to many competing tabs (high visual competition)
- They're often viewed monochromatically (in some browsers)
- They need to work on both light and dark browser themes
Three favicon strategies:
Strategy A: SVG-based favicon (best for modern browsers). Render your small mark as SVG. Modern browsers (95%+ of users) render it cleanly. Provides a sharp icon at any pixel density. Use `currentColor` in the SVG and you get automatic dark-mode adaptation.
Strategy B: Multi-resolution ICO. Embed 16x16, 32x32, and 48x48 PNG versions in a single .ico file. Older browsers and Windows shortcuts use this. The file is larger but compatible everywhere.
Strategy C: Apple touch icon at 180x180. When iOS users save your site to their home screen, this is the icon they see. Without it, iOS uses a screenshot of your page, which looks like a glitch.
Production rule: ship all three. The SVG handles modern browsers, the ICO handles legacy contexts, the touch-icon handles iOS home screen. Total weight is under 20KB combined. Five minutes of setup, professional polish for years.
The retrofit checklist
If you have an existing logo and want to add a small-size mark:
- Take a screenshot of your logo at 24 pixels wide. Look at it. What's still recognizable? What's blob?
- Identify the most recognizable surviving element. That becomes the foundation for your small mark.
- Refine that element specifically for tiny rendering: simpler shapes, higher contrast, more padding.
- Test the new small mark at favicon, iOS home screen, and Slack-workspace contexts.
- Add it to your brand guidelines as the official small-size version.
This is usually 1-2 hours of design work plus the time to update your favicons. Most retrofits don't require touching the primary logo at all. The small mark exists in parallel.
Why this matters more than founders realize
Your customer probably sees your logo dozens of times a week at small sizes. Browser tabs they have open. Slack workspaces. iOS home screen if your app is installed. Notification badges. Search result favicons. None of these are individually high-stakes. But collectively, they're more of your brand surface area than your homepage hero.
A great small mark builds recognition over thousands of micro-impressions. A bad small mark fails the same number of times. The two-mark system is cheap to set up and pays back constantly.
If you've been getting by with a single logo that doesn't work small, the small mark is one of the higher-ROI brand projects available to you. Few people will write you to compliment your favicon. But they'll recognize your brand faster across surfaces, which is worth more than any compliment.
Your brand kit, ready in 10 minutes.
Five quick taps. Free preview before you pay.
Start building free →