DEV Community

Khoa Pham
Khoa Pham

Posted on

Changing electron app icon

Original post https://github.com/onmyway133/blog/issues/66

Generate icns

  • Generate .iconset
  • Run iconutil -c icns "Icon.iconset". Note that icon names must be first letter lowsercased

icns

Use icns

  • In main.js, specify icon


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


Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode




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
  • 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

Top comments (0)