How to make a logo that works as a favicon
A favicon is the smallest place your brand will ever live. If the mark reads there, it will read everywhere else.
Key takeaways
- Use a compact symbol or monogram instead of shrinking the full wordmark.
- Simplify lines, gaps, and color contrast specifically for tiny sizes.
- Test the favicon in a real browser tab beside other sites.
Why favicons break logos
At 16 to 32 pixels there is no room for detail. Thin lines merge, small text turns to noise, and subtle color shifts disappear. A logo designed only at full size often fails this test, which is why checking early saves a redraw later.
Use the icon, not the lockup
Never squeeze a full wordmark into a favicon. Use the compact icon or a single-letter monogram version of your mark. If your logo is text-only, create a monogram from the first letter with the same colors and personality.
Increase contrast at small sizes
What looks balanced at 200 pixels can look washed out at 16. It is normal to make the favicon version slightly bolder and higher-contrast than the full-size mark. Treat it as its own crop of the identity, not a plain resize.
Test in a real tab
Drop the icon into a browser tab next to a dozen other sites and squint. If you can still pick yours out instantly, it works. The editor here previews concepts at small sizes for exactly this reason.
Design within a safe area
Keep the main shape away from the outer edge so browser masks, rounded containers, and different display systems do not make it feel cramped. Center the visual weight, not only the mathematical bounding box.
Prepare more than one pixel size
A clean source file should be exported into the sizes required by the website and device environment. Do not enlarge a tiny favicon file to create bigger icons; generate each size from the master symbol.
Run a 16–48 px icon test
Find the smallest version that remains identifiable without forcing the full logo into a tiny square.
Export the compact mark at 16, 24, 32, and 48 pixels. View the files at actual size beside several browser tabs, not enlarged on a design canvas. Test both light and dark browser themes.
Full lockup
Test: Place the complete symbol and business name inside a 32 px square.
Decision: Usually reject it when the wordmark becomes unreadable or produces visual noise.
Compact symbol
Test: Use the simplest recognisable brand mark with generous internal spacing.
Decision: Keep it when the silhouette remains clear at 16 px and does not touch the edges.
Initial or monogram
Test: Use one or two distinctive letters when the symbol is too detailed.
Decision: Keep it when the letterform clearly connects to the main identity and is not confused with a generic app icon.
- Preview at actual size
- Remove thin strokes
- Increase internal gaps
- Test light and dark browser themes
Save a dedicated favicon source rather than repeatedly shrinking the primary logo. Record the minimum acceptable size and which details were deliberately removed.
Questions about this topic
Usually not. Use a symbol, initial, or monogram that remains recognizable at 16 to 32 pixels.
Apply the guide to your own brand
Create a few focused directions, then compare them using the checks above.