Browser Extension Icon Generator
Generate all required icon sizes for Chrome, Firefox, Edge & Safari extensions — with manifest.json snippet
Drag & drop your extension icon here
or
PNG · SVG · JPG · Square image recommended · Min 128×128
Required Icon Sizes
Browser Extension Icon Requirements
Every browser extension needs icons at multiple sizes. Chrome, Firefox, Edge, and Opera all follow the WebExtensions API standard, meaning one set of icons works across all of them. Safari extensions use the same sizes but go through Xcode's Safari Web Extension Converter. The four required sizes cover every context where your extension appears: the browser toolbar, the extensions management page, the install dialog, and the Chrome Web Store or Firefox Add-ons listing.
What Each Size Is Used For
- 16×16: The toolbar action button (what users click to open your popup), shown in the browser's address bar area. This is the most visible icon — it should be recognizable even at tiny size.
- 32×32: Used on Windows systems with high DPI displays, and in some context menu placements in Firefox. Browsers pick this over 16px when the display scale is 2× or higher.
- 48×48: Shown on the
chrome://extensionsmanagement page and in Firefox Add-ons Manager. Users see this when managing their installed extensions. - 128×128: The install confirmation dialog (when a user installs your extension) and the Web Store / Add-ons store listing page. This is your storefront icon.
How to Add Icons to Your manifest.json
Copy the "icons" snippet above into the root of your manifest.json. The "action" → "default_icon" snippet controls the toolbar button specifically. Both Manifest V2 (browser_action) and Manifest V3 (action) use the same icon path format. Place your icon files in an /icons/ folder at the root of your extension directory for this snippet to work without changes.
Icon Design Tips for Extensions
- Design for 16px first: Most users will only see the 16px toolbar icon. Design your icon so it reads clearly as a silhouette at that size — avoid text, thin lines, and complex gradients.
- Use transparency: Extension icons appear on both light and dark toolbars (Chrome supports dark mode). A transparent PNG that works on both backgrounds is better than one with a solid background.
- Match browser UI: Chrome's own extension icons use a clean, flat style. Overly detailed or photorealistic icons look out of place in the toolbar.
- Consistent with your brand: Your extension icon should be recognizable as part of the same product family as your website favicon and app icon — consider using the same core symbol at different sizes.