Firefox Extension Icons: Sizes, Formats, and SVG vs PNG

The icon is the first thing users see in AMO search results and the add-ons bar. Getting it right matters.

Required Sizes

For a complete Firefox extension, provide icons at these sizes:

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

AMO also accepts a standalone 512px marketing icon uploaded separately in the developer dashboard.

SVG Support

Firefox supports SVG icons in the manifest:

{
  "icons": {
    "48": "icons/icon.svg",
    "96": "icons/icon.svg"
  }
}

SVG advantages:

• Single file, scales perfectly to any size
• Usually smaller file size than multiple PNGs
• Easy to edit

SVG disadvantage:

• Not supported by Chrome (if you ever cross-publish)
• AMO marketing icon upload requires PNG/JPG

For Firefox-only extensions: use SVG. For cross-browser: use PNG.

Designing for Small Sizes

At 16px, detailed icons become mush. Design principles:

1. Bold, simple shapes — fine lines disappear
2. High contrast — works in both light and dark browser themes
3. Recognizable silhouette — squint test: can you tell what it is?
4. Test at actual size — designers always zoom in too much

Dark/Light Browser Theme Awareness

Firefox can use different icons for dark vs light toolbar themes:

{
  "action": {
    "default_icon": "icons/icon.svg",
    "theme_icons": [
      {
        "light": "icons/icon-dark.png",
        "dark": "icons/icon-light.png",
        "size": 16
      },
      {
        "light": "icons/icon-dark.png",
        "dark": "icons/icon-light.png",
        "size": 32
      }
    ]
  }
}

Note the naming: light key means "icon for light toolbar", dark key means "icon for dark toolbar".

Generating PNG Sizes from SVG

# Using Inkscape (Linux/Mac)
for size in 16 32 48 96 128; do
  inkscape --export-type=png \
    --export-width=$size \
    --export-height=$size \
    --export-filename="icons/icon-${size}.png" \
    icons/icon.svg
done

# Using ImageMagick
for size in 16 32 48 96 128; do
  convert -background none -resize ${size}x${size} \
    icons/icon.svg icons/icon-${size}.png
done

# Using sharp (Node.js)
const sharp = require('sharp');
const sizes = [16, 32, 48, 96, 128];
await Promise.all(sizes.map(size =>
  sharp('icons/icon.svg')
    .resize(size, size)
    .png()
    .toFile(`icons/icon-${size}.png`)
));

AMO Screenshot Requirements

AMO requires screenshots for your listing. Requirements:

• At least 1 screenshot
• Minimum 600 × 400 pixels
• PNG or JPG
• Shows the extension in use

For a new tab extension, take a screenshot of:

1. The new tab page in dark mode
2. The new tab page in light mode
3. The settings/configuration panel

Quick Icon Checklist

• [ ] 48px icon (minimum for AMO)
• [ ] 96px icon (HiDPI)
• [ ] 128px icon (AMO detail page)
• [ ] Works on both dark and light backgrounds
• [ ] Recognizable at 16px
• [ ] AMO 512px marketing icon (PNG, separate upload)
• [ ] Screenshots: 1+ images of extension in action

Weather & Clock Dashboard — free Firefox new tab with weather, world clocks, search. MIT licensed.