Change Electron App icon in windows start menu

Question

I want to change the default Electron icon to custom icon on all the places but i am unable to change in two places.

The icon on the Windows start menu when we search the application
The icon on the Windows taskbar

I have also tried a few solutions

mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    resizable: false,
    icon: path.join(__dirname, 'src/app_64x64.png'),
  });

and

mainWindow.setOverlayIcon(path.join(__dirname, 'src/app_128x128.png'), 'Description for overlay');

but both the solutions are not working. Is there any way to change the icon?

Windows Task bar image

Window Application search image

Have you tried everything described there ? https://stackoverflow.com/questions/31529772/how-to-set-app-icon-for-electron-atom-shell-app — Jona, Jul 29 '20 at 09:27
Yes. It is not working for me. mainWindow.setOverlayIcon showing half in size — Vivek Kumar Shukla, Jul 29 '20 at 10:51

score 1 · Answer 1 · answered Jul 29 '20 at 13:23

1

if you are building the app with electron-builder module then add this

   "build": {
        "productName": "Your App Name",
        "win": {
            "target": "NSIS",
            "icon": "public/img/logo.ico"
          }
        }

in package.json

answered Jul 29 '20 at 13:23

Vishnu

56
3

are you using electron-builder? – Vishnu Jul 29 '20 at 14:45
Yes, I am using electron-builder – Vivek Kumar Shukla Jul 29 '20 at 16:39
and `"build": "electron-builder build"` add this in `script` tag – Vishnu Jul 29 '20 at 16:53
please check again your icon name and app location and **should be type ico** – Vishnu Jul 29 '20 at 17:10
1

no luck. I have added ico file and also tried both absolute and relative paths. It is still showing electron icon. – Vivek Kumar Shukla Jul 29 '20 at 19:14
1

Bump, has anyone solved this issue? I've done everything mentioned here and no luck. – Nam Dao Mar 11 '21 at 00:31

score 0 · Answer 2 · answered Jul 11 '22 at 13:04

in addition to what Vishnu suggested: You can also just put icon.png file inside your buildResources folder. So, my electron.manifest.json looks like this:

"build": {
"appId": "ID",
"productName": "NAME",
"copyright": "Copyright",
"buildVersion": "1.0.0",
"compression": "maximum",
"directories": {
  "output": "../../../bin/Desktop",
  "buildResources": "./bin/_____"
},
"win": {
  "target": "nsis"
}

But be aware Windows seems to cache icons, it might be the reason why you don't see any changes. You can try to delete C:\Users%USER_NAME%\AppData\Local\IconCache and reboot your PC to see if it's a case.

score 0 · Answer 3 · answered Jan 19 '23 at 12:00

Set icon property to BrowserWindow in your app.js (or what you named your entry):

function createWindow() {
mainWindow = new BrowserWindow({
    icon: 'images/logo.ico',
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true,
    }
})

Make sure to have this in your forge.config:

module.exports = {
    packagerConfig: {
        icon: 'images/logo.ico'

And this in forge.config too:

makers: [
{
  name: '@electron-forge/maker-squirrel',
  config: {
     // An URL to an ICO file to use as the application icon (displayed in Control Panel > Programs and Features).
     icon: 'images/logo.ico',
     // The ICO file to use as the icon for the generated Setup.exe
     setupIcon: 'images/logo.ico',
  },
},

All this will change the your app icon, taskbar icon, window icon. At this moment it has a issue with icon in add/remove programs and the icon in the task manager on Windows 7 and 10.

NB! As @Tetiana mentioned above - Windows make cache of icons here: C:\Users%USER_NAME%\AppData\Local\IconCache Delete it and reboot if you want to view your real icons. I spend a half day to figure out why they not changing.

Change Electron App icon in windows start menu

3 Answers3