• Browser Extension SDK
  • Icon

Extension Icon

The Plasmo framework automatically generates smaller resolution versions of icons for the built bundle. Thus, all you need to work on is the high-fidelity version!

By default, Plasmo reads the assets/icon.png file for the extension icon. Optionally, you can use these names instead of icon:

icon512icon-512icon-512x512
icon1024icon-1024icon-1024x1024

The alternative names are helpful to clarify the size of the original icon. However, Plasmo will only pick one file.

NOTE: Ensure your icon file is inside the assets directory and is a PNG file with .png extension.

Development Icon

In development mode, Plasmo converts the icon to grayscale to help distinguish it from the production bundle:

gray-scaled icon

Custom Development Icon

If you don't want the default grayscale behavior, you can place an icon.development.png file in the assets directory. Plasmo will use this file instead of the icon.png file in development mode.

Tag Specific Icons

To use a different icon for a specific build tag, use the following files:

  • icon.<tag>.png
  • icon.<tag>.<NODE_ENV>.png

Icon Sizes

Plasmo generates the following icon sizes (in px):

16x1648x4864x6432x32128x128

You can override a specific size by placing any of the following files in the assets directory:

BaseEnv-specific
icon<size>.pngicon<size>.<NODE_ENV>.png
icon-<size>.pngicon-<size>.<NODE_ENV>.png
icon-<size>x<size>.pngicon-<size>x<size>.<NODE_ENV>.png
Last updated on December 4, 2022