How to set app icon for Electron / Atom Shell App
IconsElectronIcons Problem Overview
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 pack the app to see the effect?
Icons Solutions
Solution 1 - Icons
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.
Solution 2 - Icons
Below is the solution that I have :
new BrowserWindow({
width: 800,
height: 600,
icon: __dirname + '/Bluetooth.ico',
})
Solution 3 - Icons
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()
.
Solution 4 - Icons
**
OUTDATED ANSWER, LOOK AT THE OTHER NEWER SOLUTIONS
IMPORTANT:**
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.
Solution 5 - Icons
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.
Solution 6 - Icons
win = new BrowserWindow({width: 1000, height: 1000,icon: __dirname + '/logo.png'}); //*.png or *.ico will also work
in my case it worked !
Solution 7 - Icons
In case you're converting an existing web app to an Electron app, you can use the following code:
const path = require('path')
const mainWindow = new BrowserWindow({
icon: path.join(__dirname, 'favicon.ico'),
})
Solution 8 - Icons
In my case, I don't need to specify any path such as ./
, since I use build
directory, and this is my configuration:
"build": {
"directories":{
"output": "build"
},
"mac": {
"icon": "build/logo.icns"
},
"win": {
"icon": "build/logo.png"
}
}
I found that using ./logo.png
will make electron shows the same error:
default Electron icon is used reason=application icon is not set
Solution 9 - Icons
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"
Solution 10 - Icons
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.
- Create a directory named
build
in your project directory and put the.icns
the icon in the directory as namedicon.icns
. - 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
Solution 11 - Icons
In Linux, you can search icon.png in the project directory and change both files(one for Debian and one for Redhat) with your custom icon(with the same name).
Solution 12 - Icons
For windows use Resource Hacker
Download and Install: :D
http://www.angusj.com/resourcehacker/
- Run It
- Select open and select exe file
- On your left open a folder called Icon Group
- Right click 1: 1033
- Click replace icon
- Select the icon of your choice
- Then select replace icon
- Save then close
You should have build the app