Chrome Extension Icon Design Guide
Design icons that look sharp at 128px and still read clearly at 16px. A practical guide for extension developers, not designers.
The golden rule
Design at 128px, test at 16px. If your icon is recognizable as a tiny 16-pixel square in Chrome's toolbar, it will look great everywhere else. Start with the constraint, not the canvas.
What works
Simple geometric shapes
Circles, rounded squares, shields — shapes that scale cleanly from 128px to 16px.
Bold, saturated colors
Bright colors stand out in the toolbar. Avoid pastels that blend into the browser chrome.
Unique silhouettes
If your icon works as a black-on-white silhouette, it will work at any size.
Consistent padding
Keep 8-12% padding at 128px so the icon doesn't feel cramped next to others.
What fails
Text and letters
Even a single letter becomes an unreadable blob at 16px. Use a symbol instead.
Gradients at small sizes
Subtle gradients turn into flat, muddy colors at 16-32px. Use solid fills for small sizes.
Thin outlines
A 1px outline at 128px is invisible at 16px. Use filled shapes, not outlines.
Too many elements
Multiple objects in one icon create visual noise. Pick one central element.
Do's and Don'ts
Do
- Start with a simple, bold shape
- Use 2-3 colors maximum
- Design at 128px, then simplify down
- Use a distinct silhouette (recognizable without color)
- Test on light and dark backgrounds
- Keep important elements centered
- Use pixel-aligned edges at small sizes
- Export as PNG with transparency
Don't
- Don't use text or letters (illegible at 16px)
- Don't use thin lines or fine details
- Don't use photographic images
- Don't use gradients at 16px or 32px
- Don't fill the entire canvas edge-to-edge
- Don't use more than 3-4 colors
- Don't copy another extension's icon style
- Don't use generic shapes (gear, globe) without differentiation
Tips for each icon size
Used in: Chrome Web Store listing, install dialog
- •This is your hero icon — users see it first on the store page.
- •Use the full 128px canvas. Avoid excessive padding.
- •Fine details and subtle gradients are acceptable at this size.
- •Include a clear, recognizable shape that represents your extension's purpose.
- •Test on both light and dark backgrounds.
Used in: chrome://extensions page
- •Simplify any fine details from the 128px version.
- •Reduce stroke widths — 1px strokes at 128px may disappear at 48px.
- •Drop subtle shadows or inner textures.
- •The shape should still be instantly recognizable.
Used in: Windows taskbar, tab favicon
- •Keep only the core shape and primary color.
- •Avoid outlines thinner than 2px.
- •Test on Windows if possible — rendering differs from macOS.
Used in: Browser toolbar, context menus
- •This is the hardest size. Strip the icon to its absolute essence.
- •Use a single, solid shape. No gradients, no shadows.
- •Every pixel matters — manually adjust pixel alignment if needed.
- •Test in Chrome's toolbar against both light and dark themes.
- •Aim for a silhouette that's recognizable even at a glance.
Ready to generate all your icon sizes? CWS Kit creates 16, 32, 48, and 128px icons from a single design.
Open CWS Kit — It's Free