Chrome Extension Icon Generator

The four Chrome extension icon sizes that actually matter

Chrome’s extension docs specify 16 (favicon), 32 (Windows computers), 48 (chrome://extensions) and 128 (Chrome Web Store and the install dialog). Shipping only a 128 and letting Chrome downscale makes the 16px toolbar glyph a blur. Generating the four from the original logo is the reliable approach.

The ZIP is an icons/ folder plus a JSON object you paste into manifest.json’s "icons" key. action.default_icon can reuse the 16 and 32 paths. Manifest V2 used 19 and 38 for the browser action; V3 dropped those, so they are not in this pack.

Toolbar icons are tiny. A detailed illustration that looks fine at 128 will collapse at 16. Prefer a simple silhouette, high contrast, and Fill mode if the mark is already square. Fit with transparent padding helps a horizontal wordmark survive without cropping, at the cost of looking smaller.

Always export PNG. JPEG has no alpha, so a rounded logo would pick up a white box on the toolbar. This tool does not write JPEG.

Need a website favicon.ico or iOS 1024? Those are the Favicon Generator and App Icon Generator. Nothing is uploaded; resize and ZIP stay on your device.

What you get

One square source image becomes the four PNG sizes Manifest V3 uses — 16, 32, 48 and 128 pixels — in an icons/ folder, zipped together with the JSON to paste into manifest.json. Large reductions are done in several halving steps, so the 16-pixel toolbar icon stays clean rather than jagged. Transparent areas are kept unless you choose a padding colour.

"icons": {
  "16": "icons/icon16.png",
  "32": "icons/icon32.png",
  "48": "icons/icon48.png",
  "128": "icons/icon128.png"
}

Designing for 16 pixels

• Simplify: drop text, thin lines and small details — at 16 px a letterform or a 1-pixel stroke turns into grey fuzz.
• Use a bold silhouette with strong contrast, and check it on both light and dark browser themes.
• Fill the canvas: a logo that floats in a lot of padding looks tiny next to other extensions.
• If the full logo does not survive, use a simplified mark for 16 and 32 and the full version for 128.

Chrome Web Store listing images

The store listing uses the 128×128 icon from your package; Google recommends a 96×96 artwork centred within it with transparent padding, so the icon looks consistent next to others. The listing also needs at least one screenshot (1280×800 or 640×400) and can use a 440×280 small promotional tile — create those separately with the image resizer.

Wiring the icons into your extension

The top-level "icons" field is used on the extensions page, the Chrome Web Store and in permission prompts. The toolbar button takes its image from "action": point "default_icon" at the same files, or Chrome falls back to a generated letter icon.

"action": {
  "default_icon": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png"
  },
  "default_title": "My Extension"
}

To test, open chrome://extensions, enable Developer mode, choose “Load unpacked” and select the folder containing manifest.json. Pin the extension to see the 16-pixel toolbar icon, and switch Chrome between light and dark themes to check it stays visible. To change the toolbar icon at runtime — for example to show an on/off state — call chrome.action.setIcon with another set of the same sizes.

Common icon problems

• Grey puzzle piece in the toolbar: "action.default_icon" is missing or points to a wrong path. Paths are relative to manifest.json and case-sensitive on some systems.
• Blurry toolbar icon on high-density screens: the 32-pixel file is missing, so Chrome scales up the 16.
• SVG icons: Chrome does not accept SVG for extension icons — use the PNGs.
• Store upload rejected: the package needs a 128×128 icon listed in "icons".