win = new BrowserWindow({width: 1000, height: 1000,icon: __dirname + '/logo.png'}); //*.png or *.ico will also work
in my case it worked !
**
**
You can do it for macOS, too. Ok, not through code, but with some simple steps:
Actually it is a general thing not specific to electron. You can change the icon of many macOS apps like this.
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"
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.
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.
--icon
switch. Here is what you can do.
build
in your project directory and put the .icns
the icon in the directory as named icon.icns
.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
Below is the solution that i have :
mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + '/Bluetooth.ico'});
For windows use Resource Hacker
Download and Install: :D
http://www.angusj.com/resourcehacker/
You should have build the app
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()
.
Source: Stackoverflow.com