How to add an icon to electron application

Adding an application icon in Electron is a crucial step, as it helps users identify your application. The following outlines the steps to configure the application icon in Electron:

1. Prepare the icon file

First, prepare an icon file. Icons are typically in .ico format for Windows or .png format for macOS and Linux. Ensure your icon files are of high quality and available in multiple sizes (e.g., 16x16, 32x32, 48x48, 64x64, 128x128, 256x256).

2. Add the icon to the application

In Electron, you can specify the window icon when creating a BrowserWindow instance. Here's an example in JavaScript:

javascript
const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: __dirname + '/path/to/your/icon.png' // Specify the icon path
  });

  win.loadURL('https://www.example.com');
}

app.whenReady().then(createWindow);

In this example, the icon property is used to specify the icon path.

3. Package the application

When preparing to package your Electron application, ensure the icon files are properly included. If using tools like electron-packager or electron-builder, specify the icon path in the configuration file. For example, with electron-builder:

json
{
  "build": {
    "appId": "your.app.id",
    "mac": {
      "icon": "icons/icon.icns"
    },
    "win": {
      "icon": "icons/icon.ico"
    },
    "linux": {
      "icon": "icons/"
    }
  }
}

In this configuration, different icons are specified for various operating systems.

4. Test

After packaging and installing the application, test to ensure the icons display correctly. Verify across different operating systems and screen sizes to confirm the icons are clearly visible.

Example

In a previous project, we developed a desktop application for tracking work time. We needed to add a recognizable clock icon for the application. Following the above steps, we prepared icons in multiple sizes and set them via the icon property when creating BrowserWindow. Ultimately, the icons displayed clearly across various operating systems, and users reported they could easily find our application on the desktop.

By ensuring multi-platform compatibility and visual appeal of the icons, we enhanced user experience and brand recognition, which was critical for our project.