Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create an icon for your Electron app

    Cameron NokesCameron Nokes

    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.

    electronElectron
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss