Adding custom electron app icons on Mac with electron-build

Setting up an Electron app using React and electron-build

• You can set up a simple Electron app that uses electron-build by following this blog post.
• Remove the Windows build code from package.json. Your package and publish scripts should look like this:

"scripts": {
	"package": "electron-builder build --mac -c.extraMetadata.main=build/electron.js --publish never",
	"publish": "electron-builder build --mac --publish always"
},

• Remove the win key from the build section of package.json
• Add /dist to your .gitingore file

Building and packaging the app

Launch the electron app by running the following commands:

npm run build
npm run package

This will output an application as a .dmg file in the project's /dist directory. Double click the file to launch the app.

Notice that the app is currently using the default electron icon.

Creating a suitable icon

MacOS requires icons to be 512x512px and in the .icns format. You can convert other image formats to .icns using cloudconvert.

Adding a custom icon

Create a directory called resources and place your icon into it. Then add the following configuration the build key of the your package.json.

"directories": {
	"buildResources": "resources",
	"output": "dist"
},

Now if you build and package the application again, it should include your custom icon.

The code for this complete demo is in this GitHub repository.