How to Change ElectronJS App default Icon?

Question

I am new to electronjs. I want to convert an angular app to desktop. I could achieve it successfully but the problem is that the app icon is set to default electron and not the icon I provided as follows:

   win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
  })

I changed the icon after building the app using resource hacker but what I need is to change it at build time in the correct way. what am I missing>

Answer 1

In main.js, specify icon

win = new BrowserWindow({
 width: 800, 
 height: 600,
 icon: __dirname + '/Icon/Icon.icns'
})

You can also use helper url methods

const path = require('path')
const url = require('url')
const iconUrl = url.format({
 pathname: path.join(__dirname, 'Icon/Icon.icns'),
 protocol: 'file:',
 slashes: true
})

Check this for reference: https://medium.com/fantageek/changing-electron-app-icon-acf26906c5ad

Answer 2

In the main process, you have to specify the icon path. In windows the icon has to be .ico or in mac .icns

const path = require('path')

      mainWindow = new BrowserWindow({
        width: 900,
        height: 700,
        icon: path.join(__dirname, './img/icon.ico');
        }
      })

Answer 3

You could change the icon depending on the platform your launching.

const iconPath = process.platform !== 'darwin'
    ? 'src/assets/icons/favicon.ico'
    : 'src/assets/icons/favicon.icns';

  // Create the browser window.
  win = new BrowserWindow({
    icon: path.join(__dirname, iconPath),
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
      contextIsolation: false,  // false if you want to run e2e test with Spectron
      enableRemoteModule: true // true if you want to run e2e test  with Spectron or use remote module in renderer context (ie. Angular)
    },
  });

Answer 4

What you ccan do is insert a line of code in here:

WIN = new BrowserWindow = ({
    // ...
    icon: __dirname + '/relative/path/to/your/icon/file'
   // ...
});

Answer 5

I know I am late for answering this question but I'll proceed anyway. I learned these things about the app's icon the hard way. I think this topic can be better understood by comparing the development and distribution phases.

Development phase

This is synonymous to running the app by npm start. During this phase you can never replace Electron's default icon -- no matter what piece of code you would add.

What's only possible is to put overlap icons on top of the default icon. However, it is probably not the solution you are looking for because it is not an icon replacement but just an overlay. This is what was documented about Icon overlays.

OP's above code is actually an example of the so called icon overlays.

win = new BrowserWindow({
    width: 600,
    height: 670,
    icon: `${__dirname}/dist/assets/imgs/logo.png`
})

Furthermore, icon overlays can also be used to replace the notification icons.

Distribution phase

This is synonymous to using either of the following distribution frameworks:

• electron-forge
• electron-builder
• electron-packager

to create executable files (.app/.exe) for your application. It is in this phase where you can actually replace Electron's default icon.

In electron-packager for example, you can specify the icon you want to use during the packaging like so:

cd /path/to/app

# Mac (.icns)
npx electron-packager ./ --platform=darwin --icon=/path/to/your-custom-icon.icns

# Windows (.ico)
npx electron-packager ./ --platform=win32 --arch=x64 --icon=/path/to/your-custom-icon.ico

Doing it with electron-forge or electron-builder would be of different methods. I haven't tried them yet.

The whole point is... You can truly replace Electron's default icon only when packaging already your application.