How to set a custom icon for an Electron app

Create a /build folder before building your Electron app and place your custom icon there:

terminal
├── build
|   ├── icon.png
|   ├── icon.ico
├── node_modules
├── src
├── styles
├── index.html
├── package.json
├── package-lock.json

The icon should be called icon.png or icon.ico and it should be at least 256x256 in Windows.

The icon should be called icons.icns or icon.png at it should be at least 515x512 in macOS.

After placing the icon into the build folder, run the following command:

terminal
npx electron-builder build --win portable

If you are using macOS:

terminal
npx electron-builder build --mac

electron-builder will look for an icon into the /build folder and replace it with your icon.

Note

The use of npx rather than npm will prevent to install electron-builder as a dependency; it will run the package directly in the terminal.

To build a portable in Windows compatible with both architechtures (32 and 64 bits):

terminal
npx electron-builder --ia32 --x64 -w portable

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.