Add an Icon

We have an app, but right now the app only uses the default image. Let’s make it a specific, custom image.

Finding an Image

To find an image for your application, keep a few things in mind.

• Ownership of the image (Public domain or self-owned)
• Size of image (recommendation here)

Not sure where to start? Check out this icon library!

Converting the Image

Every operating system will prefer a different format of image.

To convert the image to the appropriate format, we recommend this tool.

Including the Image in the Build

1. From your project’s root directory in the CLI, type mkdir Icons to create a new Icons directory.
2. Generate an icon file for Windows (.ico), macOS (.icns), and Linux (.png).
3. Add all of the image files to the Icons directory.

4. Replace the previous build script in your package.json to account for builds with different icons with the scripts below. In the example below, the app name is electron-app, and the icon name is unicorn. You can change that to match your own app and icon name.

    "build-darwin"  : "electron-packager . electron-app --platform=darwin --icon Icons/unicorn.icns --overwrite",
    "build-mas"     : "electron-packager . electron-app --platform=mas --icon Icons/unicorn.icns --overwrite",
    "build-linux"   : "electron-packager . electron-app --platform=linux --icon Icons/unicorn.png --overwrite",
    "build-win32"   : "electron-packager . electron-app --platform=win32 --icon Icons/unicorn.ico --overwrite",
    "build"         : "npm run build-darwin && npm run build-mas && npm run build-linux && npm run build-win32"
   

5. Rebuild: npm run build

To see an example file of this, take a peek at our example repository.