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

352 views Asked by At

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).

2

There are 2 answers

0
Maxime Jullien On

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

0
tpikachu On

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');