How to set a window icon in Electron JS?

Electron JS | Set a Window Icon: Here, we are going to how to add a window icon in Electron JS?
Submitted by Godwill Tetah, on June 15, 2020

Getting Started

I hope you all have an idea of what a window icon is all about. Below is an example of window icons currently running on my computer.

These icons are just a graphical representation of applications and mostly hang on the window taskbar. Remember Electron js is all about building native desktop applications using HTML, CSS, and JavaScript. Our applications too should have a window icon.

Okay, enough literature!. Adding a window icon is as simple as you can imagine using the icon property of BrowserWindow.

We will, therefore;

Import all required modules.
Create a new browser window of height and width 600 which is the user interface or platform of the Electron JS application.
Add the window icon using icon property and passing the folder and image to be used as an icon. It is written on their official documentation, saying (.ico) file extension is preferable and best. You can read more about window icon extensions and sizes on their official documentation.
Below is the tray icon I will use in ".png" extension which will be converted to ".ico" format.
You can check online graphics conversion tools to convert your icon or image to the ".ico" format.
Finally, run your code and enjoy the output.

In your main JavaScript file, type the following,

//system tray icon menu//

const electron = require ('electron')  // imports electron
const {app} = electron // imports menu and tray modules
const BrowserWindow = electron.BrowserWindow // calls brower window for use
let mainWindow;
app.on('ready', _ => {    
    // create browser window and set browser window dimensions
	mainWindow = new BrowserWindow({ 
        height : 600,
        width : 600,
        icon: 'src/Tray.ico' // sets window icon
    })
})

Output:

Hurry! And as you can see, that is the window icon just beside other icons and an empty browser window.