If no icon is specified when you launch a BrowserWindow in Electron it will use the icon of the executable, which is Electron's really nice bluish green atom icon. However, if you want to change this out is is pretty easy. Here is how you do it...

Configure BrowserWindow to Accept an Icon

As a temporary icon for Neutron I created this lovely little circle:


Feel free to use this lovely piece of art royalty free with no attribution!

I put this guy in an /images folder in my app directory. I then modified the main.js where I am creating the browser window to swap it in...

mainWindow = new BrowserWindow({

     x: lastWindowState.x,

     y: lastWindowState.y,

     width: lastWindowState.width, 

     height: lastWindowState.height, 

     icon: __dirname + '/images/neutron.png',

     frame: false});

Here is what you get:

hello icon

One thing to note, use a .png not an .ico file. I attempted a .ico file the first time with no luck.

One More Thing...

This applies to Windows only (sorry Mac guys/gals). Suppose you want to put a little overlay down there to note when there are unsaved changes? Or if an error occurred, or whatever. This isn't high priority on my list with Neutron, but for the sake of demonstration I created a little red asterisk:


If you use this you must pay me a up front royalty payment of $10,000 US dollars.

To make this an overlay call setOverlayIcon passing the path the .png icon and a description (for screen reader applications) on the BrowserWindow instance like so:


 __dirname + '/images/changes.png', 

 "unsaved changes");

And here is what you get:


I am not the best at creating icons but this will do for the time being :). Oh, and I was kidding about the royalty payment for that stupid asterisk (as if you didn't know that).

Thanks for reading!