Chrome Extension Icon: Sizes, Design, and How to Generate One

The chrome extension icon is the single most-seen piece of your listing — it shows in search results, in the toolbar after install, in chrome://extensions, and in every screenshot anyone takes of their browser. It gets almost no words written about it compared to titles and descriptions, but a weak icon quietly costs installs at every one of those touchpoints. This guide covers the sizes Chrome actually requires, the design choices that hold up at toolbar scale, and how to generate one if you are not a designer.

What sizes does a Chrome extension icon need?

Manifest.json's icons field expects a small set of square PNG sizes. Chrome picks the closest match for each context rather than scaling one image everywhere, so missing a size means Chrome falls back to scaling a different one — usually visibly soft.

Ship all four as separate PNG files rather than one large image and letting Chrome downscale it — a 128×128 icon shrunk to 16×16 loses detail a purpose-built 16×16 keeps. The store listing icon (what appears in search results) is generated from your 128×128 file, so that is the one worth the most design attention.

What makes an icon work at toolbar scale

• One simple shape, not a scene. At 16×16 pixels, detail disappears — test your icon by shrinking it and squinting. If you cannot tell what it is, neither can a user scanning a toolbar with a dozen other icons.
• High contrast against both light and dark toolbars. Chrome users run both themes; an icon that vanishes on a dark background loses half its audience's ability to spot it at a glance.
• A distinct silhouette. Extension icons live packed together in a small strip. A shape that reads instantly — not just a generic gear or puzzle piece — is what lets a returning user find you without reading labels.
• Consistent with your store listing colors — the icon should look like it belongs to the same product as your screenshots and promo tile, reinforcing recognition across the listing.

Design the icon for 16 pixels first, then scale up — not the other way around. An icon that looks great at 128×128 and unreadable at 16×16 fails at the size it is seen most.

Generating a chrome extension icon without a designer

1. Start from a single, simple vector shape (a letterform, a monogram, or one clear symbol tied to what the extension does).
2. Use an icon generator to export all four required sizes from one source file, rather than resizing manually in four separate passes — this keeps proportions and stroke weight consistent across sizes.
3. Check the exported set against both a light and a dark chrome://extensions view before finalizing.
4. Keep the source file (SVG or a large PNG) so you can re-export cleanly if you rebrand or need extra sizes later — regenerating from a blurry small source produces a visibly worse result than starting over.

The icon's job in your ranking, not just your looks

The icon itself is not a documented keyword-ranking input the way your title and summary are — see our Chrome Web Store SEO guide for what actually moves positions. But it directly affects the metric that feeds ranking indirectly: click-through and install rate from search results. Two listings with identical text and a similar keyword match will not convert the same if one icon reads clearly at thumbnail size and the other is a blurry, low-contrast mess. Over enough impressions, that difference in installs is exactly the kind of signal the store's algorithm rewards.

If you are still working through the rest of your listing — or have not shipped yet — our guide to publishing a Chrome extension covers every other field the icon sits alongside.