How to install an application icon for an Electron / Atom Shell application

Question

How to install the application icon for your Electron application?

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

Do I need to pack the application to see the effect?

Answer 1

Setting the icon property when creating BrowserWindow affects Windows and Linux only.

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

It must be in .icns format for OS X. There is an online icon converter that can create this file from your .png file.

Answer 2

Below is the solution I have:

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

Answer 3

You can do this for macOS as well. Well, not through the code, but with a few simple steps:

1. Find the .icns file you want to use, open it and copy it through the "Edit" menu.
2. Locate the Electron.app file, usually in node_modules / Electron / Dist.
3. Open the info window
4. Select the icon in the upper left corner (gray frame around it)
5. Insert icon via cmd + v
6. Enjoy your icon during development :-)

In fact, this is a general thing, not specific to the electron. You can change the icon of many MacOS applications like this.

Answer 4

Updated package.json:

 "build": { "appId": "com.my-website.my-app", "productName": "MyApp", "copyright": "Copyright © 2019 ${author}", "mac": { "icon": "./public/icons/mac/icon.icns", <---------- set Mac Icons "category": "public.app-category.utilities" }, "win": { "icon": "./public/icons/png/256x256.png" <---------- set Win Icon }, "files": [ "./build/**/*", "./dist/**/*", "./node_modules/**/*", "./public/**/*", <---------- need for get access to icons "*.js" ], "directories": { "buildResources": "public" <---------- folder where placed icons } }, 

After building the application, you can see the icons. This solution does not display icons in developer mode. I do not configure icons in new BrowserWindow() .

Answer 5

Electronic Designer supports icons

Answer 6

If you want to update the application icon on the taskbar, then update the following in main.js (if using typcript, then main.ts)

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

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

Answer 7

Remember that in the examples of the path to the file icon, it is assumed that main.js is in the base directory. If the file is not in the base directory of the application, the path must take this fact into account.

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

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

Answer 8

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

1. Create a directory called build in your project directory and place the .icns icon in a directory called icon.icns .
2. run the constructor by running electron-builder --dir .

You will see that the icon of your application will be automatically selected from this directory and used for the application.

Note : this answer refers to the recent version of electron-builder and tested on the electron collector v21.2.0