Home » Electron JS

Electron JS | Tray Icon

Electron JS | Tray Icon: Here, we are going to learn how to add a tray icon in an Electron JS application just like other native desktop applications?
Submitted by Godwill Tetah, on June 15, 2020

A tray icon is simply an icon that is displayed on the notification area of a desktop as seen below.

The image above is the notification area of the computer I am using to write this article and you can see some tray icons of applications that are currently running.

If you are new to Electron JS, consider checking out my recent articles which cover some topics in Electron JS since I am only gonna be talking about tray icons.

Getting Started

In this tutorial, we will simply create a simple application that displays an empty browser window of height and width 600.

We will also make use of the "path" built-in Node.Js module (path module) which will help us locate the source of our tray icon.

The tray icon is set using the tray module. The tray module has a method known as tray.setToolTip() which is the hover text when the is a mouse hover on the tray icon.

More about tray methods and events can be read on the official Electron JS documentation.

Please do not also forget to check out the possible icon dimensions and graphic or image extensions.

Below is the image I am going to use as my tray icon.

Open your main JavaScript file and type the following:

//system tray//

const electron = require ('electron') 
const path = require ('path') // import path module
const {app,Tray} = electron // import tray module
const BrowserWindow = electron.BrowserWindow //enables UI

let mainWindow;
let tray
app.on('ready', _ => {
	tray = new Tray (path.join ('src', 'Tray.PNG' ) )
	// notice above that Tray.PNG is the icon or 
	// image located in the src folder
   
	// tray icon hover text
	tray.setToolTip('Gracify Technology Company'); 
    
	// browser window dimensions
	mainWindow = new BrowserWindow({   
		height : 600,
		width : 600,
	})
})

Finally, run your code and enjoy the output!

Hurraaayyyyy! that's it, guys! You can see the icon in the notifications areas.

Never mind the fact that I did not screen-shot the empty browser window!...

Thanks for reading.

Drop your comments if in need of help.