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>

Exceptional

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

Ogburn

Answer 2

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.

Daven

I just want to add that with electron-builder, if you use CRA it somehow messes with the default icon detection so you need to disable the react-cra preset with extends: null in the builder config. – Kippy

Answer 3

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

Bombe

For Ionic users, this is the way! – Quillon

Answer 4

If anyone comes here looking for a mac specific answer and finds this doesn't work, as I did, then they may find this code useful from the electron docs. Insert this into your main.js file:

app.whenReady().then(() => {
  if (process.platform === 'darwin') { // mac specific
    app.dock.setIcon(__dirname + '/icon.png')
  }
}).then(() => {
  createWindow()
})

Proceed

Answer 5

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)
    },
  });

Chesna

Answer 6

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

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

Cartilage