Right now the packaged app shows the default Electron icon. Let’s replace it.

Start with a master image

You need one square image at high resolution, 1024×1024 pixels with a transparent background. Leave some padding around the artwork. Operating systems shrink icons down to 16 or 32 pixels for lists and notifications, so the design has to survive that. A detailed illustration that looks great at 1024 becomes a smudge at 16.

Platform formats

Each platform wants its own format:

macOS uses .icns, a container with several sizes inside
Windows uses .ico, also a multi-size container
Linux packages typically use PNG files at several sizes

Generate these from the master. On macOS, iconutil turns a folder of PNGs into .icns. Other tools produce .ico. Whatever you use, write the exact command down or add it as an npm script.

Configure Forge

Put the generated files in assets/ as icon.icns, icon.ico, and icon.png. Then point the packager at the base path, without extension:

packagerConfig: {
  icon: './assets/icon'
}

Electron Packager appends the right extension for each platform it builds. That’s why we leave it off.

Some makers need their own icon setting too. The Squirrel installer, for example, has a setupIcon option for the installer executable. Check each maker’s documentation.

Keep the assets reproducible

Commit the generated .icns and .ico files, or commit the generation script. An icon converted by hand on one release machine is a build nobody else can reproduce, and it will bite you the day that machine is gone.

Check the result

Delete the old out/ folder before you package again. Operating systems and installers cache icons aggressively. An old installed copy can make a correct configuration look broken, and you’ll waste an hour on a problem you already fixed.

Then package and look everywhere the icon appears:

the application bundle or executable in Finder or Explorer
the Dock, taskbar, and task switcher while the app runs
the installer or disk image
the installed shortcut and the application list
the file metadata the operating system shows

Test with both a light and a dark desktop theme. A dark icon on a dark Dock disappears. Fix that in the design, not by putting a colored background behind it to hide poor contrast at small sizes.

Add application icons