Making a Favicon That Doesn't Look Like Garbage
That tiny icon in the browser tab matters more than you think.
Open your browser tabs right now. How many can you identify just by the favicon?
Probably most of them. That 16x16 pixel square is doing serious work for brand recognition. Google's colorful G. Twitter's bird. GitHub's octocat. You know them instantly.
Then there's your site with the default blank page icon. Or worse, a logo that looked great at 500 pixels but turns into an unrecognizable blob at 16.
Why Favicons Get Ignored
Most people design their logo, build their site, and remember the favicon at the last minute. "Just shrink the logo down" seems reasonable. It rarely works.
A detailed logo at 16x16 pixels becomes mud. Text is illegible. Fine lines disappear. Colors blend together.
Good favicons are designed for small sizes, not adapted from large ones.
What Works at Tiny Sizes
Simple shapes. A single letter. A basic geometric form. Something recognizable in 2 seconds.
High contrast. Dark on light or light on dark. Subtle gradients vanish at small sizes.
Bold lines. Thin strokes disappear. Thick, clear shapes survive the shrink.
Limited colors. Two or three max. Complex palettes turn to noise.
The Sizes You Actually Need
Browsers, operating systems, and devices all request different sizes:
- 16x16 - Browser tabs (the critical one)
- 32x32 - Taskbar, shortcuts
- 48x48 - Windows desktop
- 180x180 - Apple touch icon
- 192x192 - Android Chrome
- 512x512 - PWA splash screens
You could create each size manually. Or use a generator that outputs all of them from one source image.
Common Mistakes
Using your full logo. "RunToolz" as text at 16 pixels? Unreadable. Use the icon portion, or create a simplified version.
Forgetting dark mode. Your black icon disappears on dark browser themes. Consider adding a subtle border or making a light version.
Ignoring the background. Some contexts show favicons on white, others on dark, others on your chosen color. Test all three.
Low resolution source. Start with at least 512x512. Scaling down works. Scaling up creates blur.
Quick Process
- Start with your logo or brand mark
- Simplify to the most recognizable element
- Make it work at 16x16 first
- Scale up from there, adding detail only where it helps
- Test in actual browser tabs, not just your design tool
A favicon is one of those small details that separates polished sites from amateur ones. Takes 10 minutes to do well. Makes a difference every time someone glances at their tabs.