Create an icon for your Electron app

Cameron Nokes
InstructorCameron Nokes

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 2 years ago

Every Electron application needs a custom icon. Mac needs an icns file and Windows needs an ico file. We'll learn how to use a npm module, electron-icon-maker, that takes a 1024x1024 PNG and then outputs all the files we need.

[00:00] To generate our application's icons, we're going to call Electron Icon Maker, and for the input, we're going to pass it this PNG file, icon.png here. I've already set this up in my application folder. You can see it's the Egghead logo there.

[00:17] As the output, I'm going to tell it to output the ICNS. The ICNS file is the icon file for Mac, and the ICO file, which is icon file for Windows. I'm going to tell it to output that to the build folder. Then let's a look. Let's open the build folder here, take a look at icons.

[00:35] There's our Mac icon. We can see that worked. There's Windows, the ICO file. In order to do it, it had to generate a lot of PNGs. We can just discard those, because we don't need those. Let's move the ICNS file and the Windows file to the root of the build folder here. We can delete that folder. This will just make it easier for when we package our project.

Stephen James
Stephen James
~ 5 years ago

Note, tried this with latest electron-icon-maker and it has issues because of breaking change to icon-gen. I had to lock my icon-gen version to 1.0.7 (devDependencies in package.json) to get this to work. "iconify": "node node_modules/electron-icon-maker/index.js -i build-assets/sosa.png -o build/" Created iconify script to get it to work