How to set app icon for Electron / Atom Shell App

Question

How do you set the app icon for your Electron app?

I am trying BrowserWindow({icon:\'path/to/image.png\'}); but it does not work.

Do I need to p

Answer 1

Setting the icon property when creating the BrowserWindow only has an effect on Windows and Linux.

To set the icon on OS X, you can use electron-packager and set the icon using the --icon switch.

It will need to be in .icns format for OS X. There is an online icon converter which can create this file from your .png.

Answer 2

Below is the solution that i have :

mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});

Answer 3

Electron builder supports icons

Answer 4

Please be aware that the examples for icon file path tend to assume that main.js is under the base directory. If the file is not in the base directory of the app, the path specification must account for that fact.

For example, if the main.js is under the src/ subdirectory, and the icon is under assets/icons/, this icon path specification will work:

icon: __dirname + "../assets/icons/icon.png"

Answer 5

If you want to update the app icon in the taskbar, then Update following in main.js (if using typescript then main.ts)

win.setIcon(path.join(__dirname, '/src/assets/logo-small.png'));

__dirname points to the root directory (same directory as package.json) of your application.

Answer 6

electron-packager

---

Setting the icon property when creating the BrowserWindow only has an effect on Windows and Linux platforms. you have to package the .icns for max

To set the icon on OS X using electron-packager, set the icon using the --icon switch.

It will need to be in .icns format for OS X. There is an online icon converter which can create this file from your .png.

electron-builder

---

As a most recent solution, I found an alternative of using --icon switch. Here is what you can do.

1. Create a directory named build in your project directory and put the .icns the icon in the directory as named icon.icns.
2. run builder by executing command electron-builder --dir.

You will find your application icon will be automatically picked up from that directory location and used for an application while packaging.

Note: The given answer is for recent version of electron-builder and tested with electron-builder v21.2.0