14: Browser Extension Icons: The Forgotten Art of Web Tool Branding

#webdev #programming #opensource #learning

Browser extensions occupy a unique and often overlooked niche in the app icon universe. With over 200,000 extensions available on the Chrome Web Store alone, and millions of active extensions installed across Firefox, Edge, and Safari, the browser extension ecosystem is enormous — yet its icon conventions are among the most poorly understood in the developer community. A well-designed, properly sized extension icon is a critical trust signal in an ecosystem where users are rightly skeptical about what they install in their browsers.

Extension icons appear in multiple contexts: the Chrome Web Store listing page, the browser toolbar, the extensions menu, and the browser's permission dialogs when your extension requests additional capabilities. Each context has different size requirements, and the toolbar context in particular demands an icon that is immediately recognizable at just 16 or 19 pixels wide. This is icon design at its most extreme constraint level.

Chrome Extension Icon Sizes

The Chrome extension manifest v3 specifies icons through the icons field in manifest.json. Chrome uses different icon sizes in different contexts: 16×16 for the browser toolbar on normal displays, 32×32 for Windows computers and menu bar on macOS, 48×48 for the extensions management page, and 128×128 for the Web Store listing and installation dialog.

manifest.json

{
  "manifest_version": 3,
  "name": "My Extension",
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png"
    }
  }
}