DEV Community

Khoa Pham
Khoa Pham

Posted on

6 1

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

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay