Browser Extension Icon Sizes: Chrome, Firefox, Safari, and Edge

Browser extensions need icons for multiple contexts: the toolbar, the extensions menu, browser action popups, and web store listings. Each browser has slightly different requirements. This guide covers Chrome, Firefox, Safari, and Edge.

Quick Reference

Here are the icons most extensions need:

These four sizes cover the core requirements across all major browsers.

Chrome Extension Icons

Chrome extensions use Manifest V3 (V2 is deprecated). Icons are defined in manifest.json:

{
  "manifest_version": 3,
  "name": "My Extension",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Action Icons (Toolbar)

If your extension has a toolbar button, you can specify separate action icons:

{
  "action": {
    "default_icon": {
      "16": "icons/action16.png",
      "32": "icons/action32.png"
    }
  }
}

Action icons should be simple and monochromatic if possible. They appear very small in the toolbar.

Chrome Web Store

For the Chrome Web Store listing, you need:

The 128x128 icon is required. Promotional tiles are optional but help if you want to be featured.

Firefox Extension Icons

Firefox uses similar manifest structure:

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

Firefox recommends including 96x96 for high-DPI displays. The browser picks the most appropriate size based on context.

Browser Action Icons

{
  "browser_action": {
    "default_icon": {
      "16": "icons/toolbar16.png",
      "32": "icons/toolbar32.png"
    }
  }
}

Firefox Add-ons Store

For addons.mozilla.org:

The header image is optional but recommended. It appears at the top of your add-on's listing page.

Safari Extension Icons

Safari extensions (for macOS and iOS) use a different approach. Icons are part of the Xcode project, not the manifest.

Required sizes for macOS:

Safari extensions are distributed through the Mac App Store, so they follow Apple's icon guidelines. No transparency in the store icon.

For iOS Safari extensions:

iOS extensions are bundled with an app, so you need the full iOS app icon set.

Edge Extension Icons

Microsoft Edge uses the same format as Chrome since it's Chromium-based:

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

For the Edge Add-ons store:

The 300x300 logo is used for promotional tiles in the store. Include it for better visibility.

Design Guidelines

Toolbar Icons

Toolbar icons should be:

• Simple and recognizable at 16px
• High contrast (work on light and dark backgrounds)
• Monochromatic or limited colors
• Meaningful even without text

Many extensions use a simplified version of their brand icon for the toolbar. The full-color detailed icon goes in the store listing; the toolbar gets a simplified silhouette.

State Indicators

You can swap toolbar icons to indicate extension state:

chrome.action.setIcon({
  path: {
    "16": isActive ? "icons/active16.png" : "icons/inactive16.png",
    "32": isActive ? "icons/active32.png" : "icons/inactive32.png"
  }
});

Use color or badge overlays to show enabled/disabled states rather than completely different designs.

Badge Text

Instead of multiple icon states, you can add a badge:

chrome.action.setBadgeText({ text: "3" });
chrome.action.setBadgeBackgroundColor({ color: "#FF0000" });

Badges appear as small overlays on the toolbar icon. Use them for counts or status indicators.

Common Mistakes

Too much detail at small sizes. Toolbar icons are tiny. Fine lines and small text become invisible at 16x16. Simplify aggressively.

Wrong icon for toolbar. Using your store listing icon (designed for 128px) as your toolbar icon. They serve different purposes and need different designs.

Missing sizes. If you only provide 128px, browsers scale it down poorly. Provide at least 16, 48, and 128.

Ignoring dark mode. Your toolbar icon might appear on a dark browser theme. Ensure it has enough contrast for both light and dark backgrounds.

Transparency issues. Some contexts expect transparency (toolbar), others don't (store tiles). Know which is which for each browser.

File Format

All browsers accept PNG. Some support SVG for certain icons:

PNG is the safe choice. Use it unless you specifically need SVG scaling.

Cross-Browser Development

If you're building for multiple browsers, create a superset of icons:

icons/
├── icon16.png
├── icon32.png
├── icon48.png
├── icon64.png
├── icon96.png
├── icon128.png
├── icon256.png
├── icon512.png
├── toolbar16.png
├── toolbar32.png
└── toolbar48.png

Then reference the appropriate subset in each browser's manifest. The extra sizes don't hurt; browsers ignore sizes they don't need.

Store Listing Checklist

Before publishing to any browser store:

• All required icon sizes included
• Icons look good at actual display size
• Toolbar icon works on light and dark backgrounds
• Store icon is high quality at 128x128
• Promotional images meet store requirements
• Screenshots show extension functionality

Each store has its own review process, but good icons help your extension stand out and build user trust.