Package and ship

Add application icons

Prepare platform icon files and configure Forge so the packaged app no longer uses the default Electron icon.

8 minute lesson

~~~

Start with a square master image that has enough resolution and transparent padding. An icon must remain recognizable at launcher and notification sizes, not only at 1024 pixels.

Platforms expect different formats. macOS uses .icns, Windows uses .ico, and Linux packages commonly use PNG files at several sizes.

Set the icon base path in packagerConfig. Electron Packager adds the platform extension where appropriate:

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

Some makers also need icon settings in their own configuration. Check the maker documentation for every target.

Keep generated platform assets in source control or document the exact generation command. A manually converted icon that exists only on one release machine makes the build irreproducible.

Delete old out/ artifacts before checking a change. Operating systems and installers cache icons aggressively, so an old installed copy can make correct configuration look broken.

Package again and inspect:

  • application bundle or executable
  • Dock, taskbar, and task switcher
  • installer or disk image
  • installed shortcut and application list
  • file metadata shown by the operating system

Test light and dark desktop themes where the platform uses them. Do not add a colored background merely to hide poor contrast at small sizes.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →