DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

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

#design #firefox #browserextensions #webdev

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"
  }
}
Enter fullscreen mode Exit fullscreen mode
Size Where Used
16px Browser toolbar (compressed)
32px Browser toolbar (HiDPI / retina)
48px AMO listing thumbnail, Extensions page
96px Extensions page (HiDPI)
128px AMO listing detail page

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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`)
));
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)