How to set app icon for Electron / Atom Shell App
Below is the solution that I have :
new BrowserWindow({
width: 800,
height: 600,
icon: __dirname + '/Bluetooth.ico',
})
**
IMPORTANT: OUTDATED ANSWER, LOOK AT THE OTHER NEWER SOLUTIONS
**
You can do it for macOS, too. Ok, not through code, but with some simple steps:
- Find the .icns file you want to use, open it and copy it via Edit menu
- Find the electron.app, usually in node_modules/electron/dist
- Open the information window
- Select the icon on the top left corner (gray border around it)
- Paste the icon via cmd+v
- Enjoy your icon during development :-)
Actually it is a general thing not specific to electron. You can change the icon of many macOS apps like this.
For Electron < 3.0 version. 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 build application you can see icons. This solution don't show icons in developer mode.
I don't setup icons in new BrowserWindow()
.
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.