How to change app icon in electron

onmyway133 commented 7 years ago

Generate icns

Generate .iconset
Run iconutil -c icns "Icon.iconset". Note that icon names must be first letter lowsercased, and use _ instead of -

icns

Use icns

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

If app icon is not updated

I get a problem that electron always shows default app icon. I tried using png, NativeImage, different icon sizes but still the problem. When I use electron-packager to make release build, the icon shows correctly, so it must be because of Electron caching or somehow 😠
Go to node_modules -> electron -> dist, right click on Electron, choose View Info
Drag another icns into the icon on the top left

info

Release with `electron-packager`

icon must be specified with __dirname (we already did) for electron-packager to pick up correct icons

aguynamedben commented 5 years ago

Did you end up finding a better way to do this? It seems the icon argument to BrowserWindow is ignored on macOS. The workaround (drag/drop) works for me, but I wish I could automate this so all developer on my team see a dev icon!

drewjosh commented 4 years ago

Is there any update on this issue? I am breaking my head because when I build and run the app (on Windows) with cli I see my icon in the taskbar. But when I install the app over an installer (icon of installer is also mine) and run it, it shows the default icon. The weird thing is, even in the OS settings where I can remove programs, my icon is shown...

I set the icon like this: mainWindow = new BrowserWindow({ width: 1280, height: 720, autoHideMenuBar: true, useContentSize: true, icon: 'src/client/assets/icons/logo.png'. });

Redsky48 commented 4 years ago

@drewjosh You should use it like this icon:__dirname +'/src/client/assets/icons/logo.png',

onmyway133 / blog