Electron app not showing the app.ico, instead, it shows the default from electron

Question

I'm trying to make a package out of my Electron project, and I'm having a problem with the icon of the already installed application.

The setup application or installer's icon is showing properly, but when I install the application, the only icon showing up correctly is the one at the title bar of the window (I'm on Windows 11), but not the one on the task bar.

I've read lots of articles, issues on GitHub and websites suggesting solutions, and none of them work for me.

The icon is showing correctly when I test the project while developing (npm run start).

Here is my forge.config.js:

module.exports = {
  packagerConfig: {
    icon: "./electron_base/icon"
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        "name": "Electronify",
        "setupIcon": "./electron_base/icon.ico"
      }
    },
    {
      name: '@electron-forge/maker-deb',
        config: {
          options: {
          icon: './electron_base/icon.png'
        }
      },
    },
    {
      name: '@electron-forge/maker-dmg',
      config: {
        icon: './electron_base/icon.icns'
      }
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin', 'linux', 'win32'],
    },
  ],
};

And here is my BrowserWindow instance on the main Electron process:

const win = new BrowserWindow({
        width: 1280,
        height: 800,
        fullscreen: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        },
        titleBarOverlay: true,
        icon: path.join(__dirname, "icon.ico"),
    })

NOTE: The path where the icons are stored is a subdirectory named electron_base, exactly inside the project root directory, where I also store the main electron process and the ContextBridge (this structure is not my favourite, but I was desperate to find a solution).

Answer 1

In case what you're talking about is the icon of the shortcut - for me the issue was that in the Electron main file, when creating the BrowserWindow, the icon needed to be set:

 mainWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    icon: path.join(__dirname, "assets/icons/icon.ico"), // set path here
    webPreferences: {
      // ...
    },
  });

In addition to this, I have it in the forge.config like you in packagerConfig and in the maker config:

const config: ForgeConfig = {
  packagerConfig: {
    icon: path.resolve(__dirname, "./assets/icons/icon"), // set path here
  },
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {
        setupIcon: path.resolve(__dirname, "./assets/icons/icon.ico"), // set path here
        iconUrl: "https://somehosting.com/icon.ico", // this must be a HTTPS URL, file:// not accepted. But only necessary for icon in "Programs and Features"
      },
    },
  ],
};

With these 4 places at which the icons can be configured, I now have everywhere the correct custom icon.

Answer 2

I have the same problem. It seems like an update problem. If you uninstall completely your app and you try to re-install it, icons will work properly. If you try to install without uninstalling the previous version, icons will not work...

Temporary solution : Uninstall and re-install

Answer 3

In dev mode, __dirname works. In production, please use process.resourcesPath

So it looks like

const resourcePath =
  !process.env.NODE_ENV || process.env.NODE_ENV === "production"
    ? process.resourcesPath // Live Mode
    : __dirname; // Dev Mode

const pathToX = path.join(resourcePath, 'x');