Chrome Extension Icon Sizes: A Practical Packaging Guide

A Chrome extension can show a sharp 128-pixel logo in one place but turn into a muddy square in the toolbar. That usually points to asset sizing, not the brand mark: choosing Chrome extension icon sizes correctly means treating toolbar, extension, and store artwork as related but distinct jobs.

These assets are not website favicons. The HTML Standard defines rel='icon' as a page link relation, while an extension declares icons in manifest.json and can define separate action artwork. If you also need the site icon, our favicon size guide covers that separate setup.

Chrome extension icon sizes: what each asset does

For an extension, icon sizes are the pixel dimensions of files supplied for different UI and packaging contexts. A dimension does not determine placement by itself; the manifest property and requesting surface do.

• Manifest artwork: General extension artwork declared in the top-level icons object. Keep this identity set consistent.
• Action artwork: The toolbar mark, supplied through action.default_icon when it should differ from the general icon.
• Store artwork: A 128x128 PNG prepared for the Chrome Web Store listing workflow. Treat it as a separate deliverable rather than assuming the package supplies every listing asset.

The conservative baseline is 16x16, 24x24, 32x32, 48x48, and 128x128 pixels. These are recommended working sizes, not one universal display rule.

Why extension icon sizes matter

Small sizes remove detail. Fine lettering, thin strokes, and a complex mark can collapse into a colored blob at 16 pixels. If an exact-size file is missing, the browser must scale an available image, and that fallback can look soft or blurred.

A useful set separates purpose from resolution. Use compact artwork for toolbar density, a consistent family for general extension surfaces, and a high-resolution square for store presentation. Each export then has a defined job instead of relying on one oversized file to fit every slot.

How to build the icon set in manifest.json

In Manifest V3, numeric keys in icons declare the pixel dimensions of referenced files. Paths are relative to the extension root and should match the file names exactly, including case. This conservative example separates identity artwork from toolbar artwork:

{
  "manifest_version": 3,
  "name": "Sample 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_title": "Run Sample Extension",
    "default_icon": {
      "16": "images/action-16.png",
      "24": "images/action-24.png",
      "32": "images/action-32.png"
    }
  }
}

The icons object gives Chrome several general-purpose representations. The default_icon map supplies denser toolbar versions at 16, 24, and 32 pixels, where a simplified mark may read better than the full logo. If you omit an action-specific icon, the general icon can serve as the fallback, so declaring the toolbar set gives you tighter visual control.

Do not copy website favicon syntax into the manifest. The sizes attribute belongs in HTML such as <link rel='icon' sizes='32x32' ...>, not in the JSON map. Likewise, an .ico file that works as a favicon is not automatically the right extension asset; PNG is the conservative package format.

Best practices for a consistent extension icon

• Design for 16 pixels first. Reduce the mark to a clear silhouette, limited colors, and shapes that remain distinct in light and dark toolbars. Refine larger exports afterward.
• Center it optically. Equal mathematical padding can still make a mark look low or crowded. Compare every variant in a real toolbar-sized preview.
• Match file dimensions. A file named icon-32.png should be 32x32 pixels, and its manifest key should say 32. Check the package path as well.
• Keep one visual family. Toolbar, management, and store artwork should share geometry and color, even when the smallest version removes decoration.
• Verify what you package. Load the unpacked extension, inspect chrome://extensions, and confirm that every referenced image is present in the ZIP. Reload the extension after changes.

Use Mzu favicondl to export PNG variants from a clean SVG or PNG source. If the site also needs a favicon, the favicon HTML code guide covers its separate markup path.

If an icon is missing after installation, check JSON syntax first, then verify the files, paths, and dimensions. Refreshing the underlying webpage does not necessarily reload packaged extension metadata, so use the extension's reload control while testing.

Conclusion: ship a deliberate icon stack

Chrome extension icon sizes matter because toolbar, extension-management, and store contexts have different visual budgets. A practical 16, 24, 32, 48, and 128-pixel PNG set gives Chrome exact source artwork instead of forcing one file into every slot. Treat those dimensions as a maintainable baseline, check the current Chrome Web Store upload rules before release, and keep extension icons separate from your website favicon.