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?

Fineable

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"
}

Spae

What about Linux, since it isn't supported by this option? See here: github.com/electron/electron-packager/blob/master/docs/… (the solution given in this link isn't super helpful for electron-forge as it does some behind-the-scene black magic) – Hillie

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"),
  });

Hillie

Answer 3

In forge.config.js, do:

const path = require('path')

module.exports = {
  packagerConfig: {
    icon: path.join(__dirname, 'favicon'),
  },
}

Important notes:

1. If the file extension is omitted, it is auto-completed to the correct extension based on the platform, including when platform: 'all' is in effect.

2. This setting doesn't change the icon when running electron-forge start.

3. If the setting is correct, and you still don't see the correct icon, you might have encountered the icon cache issue.
   If on Windows 10, run ie4uinit -show in the command line will show the latest icon.

Feudalism