Chrome Extension Icon: Sizes, Manifest and Store Rules

A Chrome extension needs a 128 × 128 px PNG icon, plus 48, 32 and 16 px versions, declared in manifest.json. Chrome’s documentation says to always provide the 128 px icon, because it’s used during installation and in the Chrome Web Store, and the 48 px icon for the extensions page. The toolbar button is 16 DIPs, so the 16 and 32 px files are what you see next to the address bar. SVG and WebP files aren’t supported.

This guide covers each size and where it appears, the manifest setup, the Web Store’s 96 px artwork rule, and how an icon holds up on light and dark toolbars.

What sizes does a Chrome extension icon need?

A Chrome extension icon needs four PNG files: 16, 32, 48 and 128 px. Chrome’s guide to configuring extension icons lists what each one is for, and says an extension needs at least one icon to appear in the toolbar.

The toolbar button is 16 device-independent pixels (DIPs) wide, according to the chrome.action documentation. On a 2× screen, 16 DIPs is 32 device pixels, so a 32 px file keeps the button sharp. Chrome picks the closest size from the list you give it, and if there’s no exact match it scales one, which can soften the image. Chrome also accepts other sizes, and the documentation encourages several because screens with less common scale factors, such as 1.5×, are becoming more common.

Three rules apply to every file:

• Use PNG. Chrome’s documentation says PNG has the best support for transparency. Any raster format Blink supports works, but SVG isn’t supported, and WebP isn’t either for manifest icons.
• Keep them square. Non-square icons may be distorted.
• Don’t skip the 128 px one. Without icons, Chrome adds a generic one that uses the first letter of your extension’s name.

How do you add icons to manifest.json?

To add icons to a Chrome extension, list the four files under the icons key in manifest.json, then list the toolbar sizes under action and default_icon. Here’s a complete Manifest V3 example, with the icon files in an icons folder:

{
  "manifest_version": 3,
  "name": "Quick Notes",
  "version": "1.0",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_title": "Quick Notes",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    }
  }
}

The icons key covers the extensions page, installation and the store. The default_icon key sets the toolbar button, and default_title is its tooltip. If you only have one toolbar image, default_icon can also be a single path string. Paths are relative to the folder that holds manifest.json.

You can change the toolbar icon later with action.setIcon(), by giving it a new image path or an image drawn on a canvas. Chrome’s documentation says to use static images, not animated ones. For unpacked extensions loaded during development, the icons must be PNG.

How do you make the four PNG files?

To make the four PNG files, start from one square master image of at least 128 × 128 px and export it at 128, 48, 32 and 16 px. A 1024 px master is easiest, because every size is a reduction. On a Mac, the built-in sips command does it:

for n in 128 48 32 16; do
  sips -z $n $n icon.png --out icons/icon$n.png
done

We ran this on a 1024 px icon and got four PNGs of exactly 128, 48, 32 and 16 px. On other systems, any image editor’s export at those sizes works. Don’t convert the small sizes from the 128 px file if you can avoid it: reduce from the master each time.

If you need an .ico for the website that goes with your extension, our free PNG to ICO converter builds one, and our favicon converter makes a full favicon set. Our favicon sizes guide explains those files.

What are the Chrome Web Store icon rules?

The Chrome Web Store icon must be a 128 × 128 px PNG, and Google’s guidelines say the actual artwork for a square icon should be 96 × 96 px, with 16 px of transparent padding on each side. The rules come from Google’s page on supplying images for the Chrome Web Store, which also says the icon should work well on both light and dark backgrounds.

Google’s page adds a few more rules:

• No edge. Don’t put a border around the 128 px image, because the store’s interface might add edges.
• Small shadows only. Avoid large drop shadows, which the store may add itself.
• Mostly dark icons. Consider a subtle white outer glow so the icon reads on dark backgrounds.
• Face the viewer. Avoid built-in perspective.
• Same visual weight. For a squarish icon, make the artwork 75–80% of the width. A circular icon should be about 112 px across, or 85–90% of the width.

An image with no alpha channel is treated differently: Google says it is placed in a frame with 12 px rounded corners. In AI Icon Creator’s test, we built both versions from one icon: a full-bleed 128 px square, with the store’s 12 px frame simulated, and a 96 px rounded artwork centred on a transparent 128 px canvas. Both are valid. The padded version gives you control of the corners, and the full-bleed version leaves the framing to the store.

To pad an icon in Python with Pillow, resize it to 96 px and paste it on a transparent canvas:

from PIL import Image

art = Image.open("icon.png").convert("RGBA").resize((96, 96), Image.LANCZOS)
canvas = Image.new("RGBA", (128, 128), (0, 0, 0, 0))
canvas.paste(art, (16, 16))
canvas.save("icons/icon128.png")

The store listing needs more than the icon. Google’s page says a small 440 × 280 px promotional image is required, and a 1400 × 560 px marquee image is optional.

Will your extension icon work on a light and a dark toolbar?

An extension icon works on both toolbars when its shapes stay readable and its tile colour doesn’t vanish into either background. In AI Icon Creator’s test, one pencil was generated in four styles and its tile colour was compared with a white and a dark grey toolbar, using the WCAG contrast formula. The flat blue tile scored 5.97:1 on the light toolbar and 2.02:1 on the dark one. The three pale-tile styles (clay, glossy and frosted) scored between 1.10:1 and 1.26:1 on the light toolbar, so their edges nearly disappeared, but 9.61:1 to 10.95:1 on the dark one. The toolbar colours are mock values, not measured from Chrome.

So a pale tile doesn’t protect the edge on a light toolbar, and a saturated tile loses some edge on a dark one. That’s why Google asks for an icon that works on both: a mid-tone tile or a shape with its own outline is worth testing on each. Our guide to keeping an icon legible at small sizes has a checklist for 16 px, and our app icon colours guide explains the contrast test.

Try a symbol for your extension:

Why is my Chrome extension icon not showing?

A Chrome extension icon usually doesn’t show because the file is in an unsupported format, the path is wrong, or the button is hidden. Check these:

• Format. Use PNG. SVG and WebP aren’t supported for manifest icons, and unpacked extensions must use PNG.
• Paths. Each path is relative to manifest.json. A typo gives you the generic first-letter icon.
• Reload. After editing the manifest, reload the extension on chrome://extensions.
• Square images. A non-square image may be distorted.
• Pinning. Chrome’s Web Store help says to select Extensions and then Pin to bring a hidden extension back to the toolbar, and that some extensions don’t have this option.

Frequently asked questions

What size should a Chrome extension icon be?

A Chrome extension icon should be a 128 × 128 px PNG for installation and the Chrome Web Store, with 48, 32 and 16 px versions for the extensions page, Windows and the toolbar. Chrome’s documentation says to always provide the 128 px icon. The Web Store’s guidelines ask for about 96 × 96 px of artwork inside it.

Can a Chrome extension icon be an SVG?

A Chrome extension icon can’t be an SVG when it is declared in the manifest, according to Chrome’s documentation. SVG and WebP files aren’t supported for manifest icons, and PNG is recommended because it handles transparency best. Export your SVG as PNG files at 128, 48, 32 and 16 px and list those in manifest.json.

What size is the Chrome Web Store icon?

The Chrome Web Store icon is a 128 × 128 px PNG included in your extension’s ZIP file. Google’s guidelines say the artwork should be 96 × 96 px for a square icon, with 16 px of transparent padding on each side, and should work on both light and dark backgrounds. A picture without alpha gets a frame with 12 px rounded corners.

Why is my Chrome extension icon blurry?

A Chrome extension icon looks blurry when Chrome has to scale a file to fit, because it picks the closest size from the ones you provide. The toolbar button is 16 DIPs, so add 16 and 32 px files, export each from the large master, and keep the drawing simple so it stays clear at 16 px.

How do I make a Chrome extension icon with AI?

To make a Chrome extension icon with AI, describe one simple symbol for what your extension does, generate it in a few styles, choose the one that stays clear at 16 px and export square PNG files at 128, 48, 32 and 16 px. In AI Icon Creator you can compare styles side by side, then resize the result for your manifest.

Ready to make your extension icon?