| description |
|---|
How to customize icons in your Plasmo browser extension. |
import { Callout } from "nextra-theme-docs"
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:
| icon512 | icon-512 | icon-512x512 | icon1024 | icon-1024 | icon-1024x1024 |
|---|
The alternative names are helpful to clarify the size of the original icon. However, Plasmo will only pick one file.
Ensure your icon file is inside the `assets` directory and is a PNG file with the `.png` extension.In development mode, Plasmo converts the icon to grayscale to help distinguish it from the production bundle:
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.
To use a different icon for a specific build tag, name your icon file as follows:
icon.<tag>.pngicon.<tag>.<NODE_ENV>.png
Plasmo generates the following icon sizes (in px):
| 16x16 | 48x48 | 64x64 | 32x32 | 128x128 |
|---|
You can override a specific size by placing any of the following files in the assets directory:
| Base | Env-specific |
|---|---|
icon<size>.png |
icon<size>.<NODE_ENV>.png |
icon-<size>.png |
icon-<size>.<NODE_ENV>.png |
icon-<size>x<size>.png |
icon-<size>x<size>.<NODE_ENV>.png |