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.