Which Icon Sizes Does a Chrome Extension Need?

Short answer: a Chrome extension uses PNG icons at 16, 32, 48 and 128 px. Open Imgovo’s Chrome Extension Icon Generator, add one logo, and download a ZIP with all four sizes plus the icons part of manifest.json. Everything is made in your browser, so your logo is never uploaded.

Where each size is used

According to Chrome’s documentation, the four sizes have different jobs:

Size	Where it appears
16 × 16 px	Favicon on extension pages, and the context menu
32 × 32 px	Often required on Windows computers; also used for the toolbar icon in the snippet below
48 × 48 px	The extensions management page
128 × 128 px	The Chrome Web Store and the installation dialog

Because the 16 px icon is so small, fine detail and thin text disappear. A bold symbol or one letter works better than a detailed logo.

Use PNG, not SVG

Chrome does not support SVG for the icons declared in manifest.json. You can still start from an SVG logo: the generator draws it at each size and saves PNG files. If you want to convert an SVG yourself, the SVG Converter does that at an exact width.

Step by step

1. Open the Chrome Extension Icon Generator and drop a logo on the page, click to choose it, or paste from the clipboard. A square image with a transparent background works best.
2. Under Shape, choose Fit whole image to keep the whole logo, or Crop to square to fill the square.
3. Choose a Background: transparent or a color.
4. Enter the Folder of the icons in your extension, for example icons/. Use a simple folder name, without spaces and without a web address.
5. Adjust Padding and Rounded corners. Use less padding for small icons.
6. Check the four previews under Icons.
7. Click Download icons (ZIP).

Add the icons to manifest.json

The ZIP contains the four PNG files and a file named manifest-icons.json. The same lines also appear under Add to your manifest.json, with a Copy button. They hold two parts: the icons key (sizes and paths) and the action key (the toolbar icon).

The result looks like this. The file names in your own package may differ, so copy the lines the tool gives you:

{
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png"
    }
  }
}

This is not a complete manifest. Copy the icons and action parts into your own manifest.json, create the folder in your extension and put the PNG files into it.

Firefox and Edge

Their extension formats also use an icons key with PNG files, but each store has its own review rules and may ask for extra sizes. Check the documentation of the store you publish to. Imgovo only makes the icons; it does not submit or approve anything.

Checklist before you publish

• The four PNG files exist in the folder named in manifest.json.
• The 16 px icon is still readable on a light and a dark background.
• The icon matches the logo you use in the store listing.
• You tested the extension in your browser after changing the manifest.

Privacy

The icons are drawn in your browser and the ZIP is built on your device. Your logo never leaves your computer.

Try it now

Open the Chrome Extension Icon Generator, add your logo and download all four sizes in one ZIP. For a website icon instead, use the Favicon Generator.