Designing icons that stay sharp at 16×16
A 16×16 icon has just 256 pixels. Detailed logos turn into blurry smudges at that size, while simple, bold shapes stay recognizable. These practical rules help your favicon and app icon stay sharp.
1. Simplify the mark
Use one recognizable element: the first letter of your brand, a symbol, or a single shape from your logo. Remove taglines, thin outlines, gradients and small details. Many brands use a different, simpler “small logo” for favicons — that is normal practice, not a compromise.
2. Go bold and high-contrast
- Lines should be at least 2 px thick at 16 px; 1 px lines often vanish or turn gray after scaling.
- Choose strongly contrasting colors. Light gray on white or dark blue on black is invisible in many browser themes.
- Test on both light and dark tab bars — Chrome, Edge and Firefox all have dark themes.
3. Fill the space
Browsers do not add padding to favicons. A shape that fills 90–100% of the square looks larger and crisper than one floating in the middle. Use a colored background shape (square, rounded square or circle) if your mark is thin or transparent.
In the Icon Editor the background layer can be a square, rounded square or circle in any color, and the Emoji & Text tool builds such icons in one step.
4. Align to the pixel grid
When an edge falls between two pixels, anti-aliasing blurs it into two half-gray rows. Make important edges land on whole pixels at your smallest size:
- Design at 256 px using multiples of 16 (each 16 px block equals one pixel at 16×16).
- Turn on the pixel grid (Ctrl+') and center crosshair (Ctrl+;) in the editor to check alignment and symmetry.
- Use the arrow keys to nudge layers by 1 px (Shift+arrow for 10 px) until edges are crisp in the 16 px preview.
5. Hand-tune the smallest sizes
For the best results, draw the 16 and 32 px versions separately. Turn off anti-aliasing and use the pencil tool to place pixels exactly. You can export a dedicated small design as its own ICO and combine sizes, or simply keep the small design for favicons and the detailed one for large tiles.
6. Text in icons
- One or two characters work at 16 px; whole words do not.
- Prefer heavy weights (Bold or Black) and simple, geometric fonts.
- For Korean, CJK and other complex scripts, a single syllable or character with a strong outline is most legible.
7. Always check at actual size
A design that looks fine at 400% zoom can fail at 100%. Keep the actual-size preview visible while working — the editor shows all ICO sizes live — and look at the icon in a real browser tab after uploading.