Chrome Extension Icon Sizes and Listing Image Specs

What icon sizes does a Chrome extension need?

Provide four square PNG files: 16x16, 32x32, 48x48 and 128x128 pixels. Google's docs treat the 128 px icon as the one you must always supply, and recommend the 48 px one too; the 16 px and 32 px files are what keep the toolbar and small menus sharp.

The 128 px file is the important one, because it is what people see when they install the extension. The smaller sizes carry the same artwork, redrawn so they stay readable in tiny spaces. Chrome's docs say you may supply other sizes and Chrome will use the best fit. Google can change the guidance, so check the official manifest icons reference and the Web Store image guide before you submit.

If you only want to browse how other extensions present themselves, our developer tools category shows a spread of real listings. Looking at a dozen icons side by side is a fast way to see which styles survive at small sizes.

Where does Chrome show each icon size?

Each size has a job: 16 px is for tiny UI, 32 px for sharp toolbars, 48 px for the management page and 128 px for install and store screens. Knowing that tells you where to spend design effort.

16 px

The favicon on an extension's own pages and the context menu icon, which is also the standard toolbar size. Expect a lot of detail to disappear here.

32 px

Windows computers often require this size, according to Chrome's docs. It also gives high-density displays a sharper file than a stretched 16 px one.

48 px

Each card on the chrome://extensions page. Open the page to see how your icon sits beside the name and description.

128 px

Installation and your Chrome Web Store listing. Everything else in your branding starts from this file.

Chrome also shows the toolbar icon in the puzzle-piece Extensions menu and, once pinned, directly in the toolbar. Pinning is up to the user, so your icon has to be recognisable when it sits among twenty others.

How do you add icons to manifest.json?

Add an icons object to manifest.json that maps each size to a file path, then reload the extension. Paths are relative to the extension's root folder, not to the manifest.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png"
    }
  }
}

1. Create an images folder inside your extension directory and put the four PNGs in it.
2. Add the icons object to manifest.json as shown above.
3. Open chrome://extensions and switch on Developer mode in the top right.
4. Click Load unpacked and pick your extension folder. If it is already loaded, click the reload arrow on its card.
5. Check the 48 px icon on the card and the toolbar icon in the puzzle-piece menu.

If you have not turned on the toggle before, our walkthrough on enabling Developer mode in Chrome covers it, including managed browsers where the switch is locked. Use PNG files: Chrome recommends PNG for its transparency support, and SVG and WebP are not supported for icons in the manifest.

How do you set or change the toolbar icon?

The toolbar icon comes from action.default_icon in the manifest, and you can swap it at runtime with chrome.action.setIcon. Chrome's docs recommend always including action and default_icon, and if an extension supplies no icon at all, Chrome shows a generic one built from the first letter of its name.

Runtime changes are useful for state, such as a grey icon when the extension is off for the current site and a coloured one when it is active. You pass a path or a set of size-to-path entries, and Chrome swaps the image right away. For a small text signal, a badge is lighter than shipping extra icons.

chrome.action.setIcon({
  path: {
    "16": "images/icon-16-active.png",
    "32": "images/icon-32-active.png"
  }
});

chrome.action.setBadgeText({ text: "ON" });

• Keep an inactive and an active version of the same silhouette, so the shape stays recognisable.
• Do not rely on colour alone; a greyed icon on a dark toolbar can vanish.
• Test on both light and dark Chrome themes, since the toolbar background changes.
• Use the badge for counts or short status text instead of redrawing icons dynamically.

What images does the Chrome Web Store listing need?

You upload a 128 px store icon, one to five screenshots, and a small promo tile. A marquee promo tile is optional. These are the sizes in Google's current image guide, but confirm them in the Developer Dashboard when you submit.

Screenshots should show the extension working on a real page, not a flat logo. Use the full 1280 x 800 frame with square corners and no padding. Keep any text large enough to read when the image is shown smaller.

The promo tiles are your banner ads inside the store. Use one clear visual, follow Google's advice to avoid text, and skip tiny screenshots. If you also make YouTube-style graphics, the free YouTube thumbnail size tool is a useful reference for that other format.

How do you design an icon that stays readable at 16 pixels?

Start with one bold shape and one or two colours, then redraw it for each size instead of just shrinking it. A 128 px logo with fine lines turns to mush at 16 px.

• Use a single silhouette that is recognisable in a second, not a detailed scene.
• Avoid text and thin strokes; letters below 16 px are unreadable.
• Give the icon a distinct outline or background shape so it does not blend into the toolbar.
• Limit your palette. Two strong colours read better than gradients at small sizes.
• Align shapes to the pixel grid at 16 and 32 px to prevent fuzzy edges.
• Keep a little breathing room at the edges of the 128 px file so it does not look cramped in the store.

Colour choice matters more than most people expect. Pick a brand colour with the colour picker tool, then check its contrast on a white and a near-black background. If the icon fails either, add an outline.

How do you export all four sizes from one design?

Draw a vector master, export it at each size as PNG, then hand-tune the 16 px and 32 px versions. Most design tools can export several sizes in one pass.

1. Create a square artboard in a vector tool such as Figma, Illustrator or Inkscape, with the artwork inside a safe margin.
2. Duplicate it four times and set the sizes to 16, 32, 48 and 128 pixels.
3. Export each as PNG with a transparent background.
4. Zoom to 100 percent and inspect the 16 px and 32 px files. Nudge shapes to the pixel grid where edges look soft.
5. Name the files consistently, such as icon-16.png, and drop them into your images folder.
6. Reload the extension and compare the result to the list of sizes in the manifest.

If you would like a starting point, extensions that save images from the web can help you gather references and existing assets, covered in the last section. You should only reuse artwork you have the rights to, so treat downloaded images as inspiration, not raw material.

Why is my extension icon blurry or missing, and where can you get ideas?

A missing icon is nearly always a wrong path, and a blurry icon is nearly always a stretched file. Check those two before anything else.

• Grey puzzle-piece placeholder: the path in manifest.json is wrong or the file is not PNG. Paths are relative to the root folder.
• Blurry toolbar icon: you supplied only one small size, so Chrome may stretch it on a high-density display. Add 32 px.
• Old icon still shows after an edit: click the reload arrow on chrome://extensions.
• Manifest error on load: a trailing comma or missing quote; a JSON viewer helps you spot it.
• Store rejection for images: wrong dimensions, misleading artwork or screenshots that do not show the actual product.

For references, browse how existing extensions present themselves. The image downloader hub lists tools that save images from pages, and the developer hub collects tools for people who build extensions. Use them for research and for grabbing assets you are allowed to use.

For a broader view of the author-side tooling, AI tools for developers covers assistants that can help you write the manifest and background scripts.