CODEWITHSUNDEEP
javascriptelectron
Vivek Kumar Shukla
Vivek Kumar Shukla

Reputation: 196

Change Electron App icon in windows start menu

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

  1. The icon on the Windows start menu when we search the application
  2. 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

Upvotes: 2

Views: 7951

Answers (4)

Kyier Cupid
Kyier Cupid

Reputation: 1

For those using electron by itself with a package.json file. Make sure to include the path to the png with the icon key.

Example:

{
  "name": "app",
  "version": "1.0.0",
  "description": "generic description",
  "main": "main.js",
  "type": "module",
  "icon": "./path/to/icon.png",
}

Upvotes: 0

CHILIEV
CHILIEV

Reputation: 1

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.

Upvotes: 0

Tetiana Dudarenko
Tetiana Dudarenko

Reputation: 36

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.

Upvotes: 1

Vishnu
Vishnu

Reputation: 56

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

Upvotes: 1

Related Questions