Setting platform dependant icon via electron-forge electronPackagerConfig

Question

Using electron-forge to build a desktop app. The app is built for both OSX & Windows. Inside my package.json, I have:

"electronPackagerConfig": {
    "icon": "src/images/icon/app_icon_osx.icns"
}

When I build on Windows, I'm having to manually change the icon in package.json from "app_icon_osx.icns" to "app_icon_win.ico".

If I try to just use "app_icon.png" for both platforms, the icon doesn't show on OSX, and the build fails with "rcedit.exe failed with exit code 1. Fatal error: Unable to set icon" on Windows.

I have all 3 versions of the icon (icns, ico, png) in a folder in the project. Because i'm using electron-forge, i don't seem to be able to use electron packager's --icon argument.

Is there a way I can pass the icon to use as a command line arg, instead of hardcoded in package.json? Or a way I can use the same png for both platforms?

Answer 1

The extension is automatically added for each platform. Just supply an icon per platform like this: app_icon.icns, app_icon.ico, ...

Then update your config:

"electronPackagerConfig": {
    "icon": "src/images/icon/app_icon"
}

Answer 2

The accepted answer works for macOS and Windows, but for Linux you'll have to do something like this:

Set the app icon (for the app list only) in the maker:

    {
      name: "@electron-forge/maker-deb",
      config: {
        options: {
          icon: "./src/images/icon.png",
        },
      },
    },

Create an assets folder (or anything) an copy it during the build with the copy-webpack-plugin in your webpack.main.config.js:

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // ...
  plugins: [new CopyPlugin([{ from: "./assets", to: "assets" }])],
};

You can now access any files inside this folder from your main process, so reference the icon when creating your BrowserWindow as documented here

mainWindow = new BrowserWindow({
    // ...
    icon: path.join(__dirname, "assets/icon.png"),
  });