How to set app icon for Electron / Atom Shell App

Solution 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.

Solution 2:

Below is the solution that I have :

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

Solution 3:

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:

**

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:

1. Find the .icns file you want to use, open it and copy it via Edit menu
2. Find the electron.app, usually in node_modules/electron/dist
3. Open the information window
4. Select the icon on the top left corner (gray border around it)
5. Paste the icon via cmd+v
6. 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:

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.