Chrome Extension Icon: Sizes and Design

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.

Using the toolbar icon to show state

The toolbar icon is not only a logo — it is the only piece of persistent UI most extensions get, and it can tell the user what is happening without them opening anything. Two mechanisms do almost all of this work.

• A badge. A short piece of text over the corner of the icon — a count, a status letter. Keep it to a few characters; anything longer is clipped and unreadable at toolbar size.
• A second icon set. Swapping the icon for a greyed or muted variant when the extension is inactive on the current page tells the user why nothing is happening, and removes an entire category of support question.

If you do build an inactive variant, design it as a real second icon rather than lowering the opacity of the first. A washed-out icon on a dark toolbar frequently disappears altogether, which reads as broken rather than idle. And do not rely on colour alone to carry the difference — a user who cannot distinguish your active green from your inactive grey needs the shape or the badge to say it too.

The other images your listing needs

The manifest icons are only half the artwork. The store listing has its own set, and they are judged together — a sharp icon next to stretched screenshots reads as unfinished.

Screenshots are where most listings lose people. A raw screen capture at full browser width shrinks to an unreadable strip in the listing; a cropped view of the one thing the extension does, with a short caption burned into the image, survives the shrink. Show the extension working on a realistic page, not an empty tab.

Format, file size and what to avoid

• PNG with transparency for the manifest icons. Not JPEG — the artefacts around hard edges are visible at small sizes, and there is no transparency.
• Keep the padding consistent. Leave a small, even margin inside the square. An icon drawn edge to edge looks larger than its neighbours in the toolbar and slightly wrong next to them.
• Do not use Chrome's own branding. The Chrome logo, the puzzle piece, or anything that implies your extension is an official Google product is a rejection, not a style choice.
• Do not put your extension's name in the icon. It is unreadable at 16px and redundant everywhere the name already appears next to it.
• Avoid copying a well-known mark. An icon that mimics a popular extension or a brand you are not affiliated with is a trademark problem waiting for a takedown, however flattering the intent.

How to test an icon before you ship it

1. Pin it to a toolbar that already has eight or ten other extensions and see whether your eye finds it without reading the tooltip.
2. Switch Chrome between light and dark and check it survives both.
3. Look at it on a non-retina display if you have one — hairlines that hold together on a high-density screen fall apart on a standard one.
4. Put your 128px icon next to the icons of the extensions that rank above you for your main keyword. That row is exactly what a searching user sees, and it is the only honest test of whether yours stands out.

If you change the icon after launch, change it once and deliberately. Regular users identify your extension by that shape in their toolbar; a redesign every few months costs recognition without buying anything back.

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.

Why is my Chrome extension icon blurry?

Almost always one of three causes, and all three are fixable before you upload anything.

• One size is doing every job. Supplying a single 128px file and letting Chrome downscale it produces soft edges at 16px, because the browser has no idea which details were load-bearing. Ship each size as its own file.
• The artwork was upscaled. Anything drawn at 48px and stretched to 128 arrives at the store looking exactly as stretched as it is. Draw at the largest size, or draw in vector, and go down from there.
• Detail that cannot survive the shrink. Thin strokes, fine gradients, and small text all turn to mush at toolbar scale. If the 16px version is unreadable, the answer is a simpler mark, not a sharper export.

Two smaller traps are worth knowing. Transparency around the artwork is expected, so a solid white square will look like a box on a dark theme. And the toolbar icon and the store icon are different jobs — the first has to read at a glance next to a dozen others, the second is a shop window at 128px. The same file rarely does both well.

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.