How to set app icon for Electron / Atom Shell App

Question

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?

One thing you can do for Mac is put a `postinstall` script in your project that will copy the .icns file in place under node_modules/ automatically. — theram, Jul 08 '19 at 09:25

Alex Warren · Accepted Answer · 2021-07-05T09:48:43.203

217

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.

edited Jul 05 '21 at 09:48

answered Jul 21 '15 at 11:58

Alex Warren

7,187
2
31
30

Can you fix this answer to be accurate wrt Windows please? – Ana Betts Jul 21 '15 at 19:09
Thanks @ShawnRakowski, you're right - I've just tested this and the icon property does indeed work on Windows too. I've updated my answer to reflect this. – Alex Warren Jul 21 '15 at 19:58
1

This worked at first, but then I sent the distributable app to my friend and it didnt work! Any ideas? – Chet Feb 27 '16 at 01:41
I'm not seeing how to do this. I tried `electron-package . --all --icon` but got an error "TypeError: Path must be a string. Received true" – Nick Jun 26 '16 at 21:12
14

@Nick you will need to do something like the following `electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"` – Mateo Jun 29 '16 at 02:45
I agree with Tieme. The answer's linked icon converter is old and only supports icon sizes of 256x256, which is ok for Windows and Linux, but Mac OS .icns files max out at 1024x1024. @AlexWarren, please update your answer to reflect this. – Chunky Chunk Apr 20 '17 at 21:38
1

With electron-packager you'll want to do something like "--icon=src/assets/icons/logo" and electron will handle adding the extension for the relevant platform – PedroPovedaQ Aug 20 '18 at 16:53
1

The solution by @PedroPovedaQ works (I checked the source code and you don't need to specify the extension), but I'm forced to call a `touch builddir/myapp.app` to see the icon in my Finder. Seems like MacOS need help to see the new icon. See https://gist.github.com/fabiofl/5873100#gistcomment-1320553 – keul Sep 04 '19 at 14:33
Have you ever had an issue where the app icon looks fine but the icon that shows up within the notification looks bad, almost like when a TV goes bad... – jmchauv Nov 13 '19 at 16:09

score 93 · Answer 2 · edited Aug 06 '21 at 06:25

93

Below is the solution that I have :

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

edited Aug 06 '21 at 06:25

Wenfang Du

8,804
9
59
90

answered Apr 09 '16 at 13:33

Sh4m

1,424
12
30

28

Worth mentioning that __dirname is the path of your /src/ folder (i.e. the folder of your app.js/main.js file). – Konstantin May 26 '17 at 21:54
2

`.icns` not needed ? – ishandutta2007 Jul 11 '18 at 19:50
how to create .ico file, is there any online tool? – Edison Pebojot Mar 18 '21 at 09:12
1

@EdisonPebojot search on google "online ico creator" there are plenty of ico creater. – Sh4m Mar 21 '21 at 07:27
3

IntelliJ suggested that is better to write: `icon: path.join(__dirname, 'icons/png/256x256.png')` – Srdjan Milic May 13 '22 at 05:43
this solution seems not working on macOs. – Jeff Pal Oct 30 '22 at 22:21

Andrey Patseiko · Answer 3 · 2022-07-04T08:27:34.167

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().

'build' in the application package.json is not supported since 3.0 anymore — S.B., Jun 28 '22 at 09:53

alexrjs · Answer 4 · 2021-02-15T08:38:26.093

22

**

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.

edited Feb 15 '21 at 08:38

answered Nov 19 '16 at 08:44

alexrjs

546
8
15

6

This is amazing, thank you for this. I did need to drag and drop to get it to work but amazing nonetheless. – Robert Masen May 03 '17 at 02:53
Complete instructions: https://support.apple.com/kb/PH25383?locale=en_US – Johann Jan 15 '18 at 14:56
This seems to only work for development. When I run 'yarn dist', the icns file gets replaced with the default electron one. – Dave Jan 26 '19 at 10:45
3

@Dave Actually he said `6. Enjoy your icon during *development* :-)` – Zin Feb 20 '19 at 15:35
Well guys... I know... But this fix is over 2 years old... ;-) And btw. you should be able to use this "hack" also on a final build, since you simply change it on the dist app... Have not tried for a while.. And who knows maybe there is an official way, now... ;-) – alexrjs Feb 21 '19 at 18:09

score 4 · Answer 5 · answered Apr 14 '19 at 13:30

4

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.

answered Apr 14 '19 at 13:30

Hari Das

10,145
7
62
59

1

sure about mac? – Anil8753 Jun 30 '20 at 11:16

score 4 · Answer 6 · answered Aug 06 '21 at 06:29

4

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'),
})

answered Aug 06 '21 at 06:29

Wenfang Du

8,804
9
59
90

Darryl RN · Answer 7 · 2022-01-20T14:31:24.387

2

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

edited Jan 20 '22 at 14:31

answered Jan 20 '22 at 13:32

Darryl RN

7,432
4
26
46

Kiran Maniya · Answer 8 · 2019-10-26T09:03:05.313

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 named icon.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

score 1 · Answer 9 · answered Dec 18 '20 at 06:20

1

win = new BrowserWindow({width: 1000, height: 1000,icon: __dirname + '/logo.png'}); //*.png or *.ico will also work

in my case it worked !

answered Dec 18 '20 at 06:20

KISHLAY KUMAR

26
2

score 1 · Answer 10 · answered Jul 12 '22 at 03:22

1

windows 10

electron-packager

electron-packager . appname--platform=win32 --arch=x64 --overwrite --icon=icons/icon.ico --out=release-builds

the icon keeps getting cached, so using the --out flag helped.

answered Jul 12 '22 at 03:22

Subramanya Rao

151
3
6

score 0 · Answer 11 · answered May 16 '19 at 20:59

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"

score 0 · Answer 12 · answered Mar 10 '22 at 06:23

0

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

answered Mar 10 '22 at 06:23

Mostafa Mohammadzadeh

591
7
6

score 0 · Answer 13 · answered Jan 09 '23 at 01:15

If you are using electron-builder, you can follow their documentation on how to add your app-icon.

You can specify a path to set the icon in the electron-builder.json5 configuration file, e.g. for mac:

/**
 * @see https://www.electron.build/configuration/configuration
 */
{
appId: 'YourAppId',
mac: {
  artifactName: '${productName}_${version}.${ext}',
  target: ['dmg'],
  icon: 'public/logo.png',
 },
}

harizh · Answer 14 · 2023-07-24T00:48:14.750

It is recommended to use .ico extension for app icon. You can refer the piece of code which is mentioned below. If suppose you having any other image formats, Just convert it with .ico extension using online converters

let mainWindow;
mainWindow = new BrowserWindow({
        width:1200,
        height:600,
        icon: path.join(__dirname,'/icon.ico'),
    });

Here _dirname refers to your file path.
icon.ico - Image file

score -4 · Answer 15 · answered Oct 12 '20 at 16:34

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

How to set app icon for Electron / Atom Shell App

15 Answers15

IMPORTANT: OUTDATED ANSWER, LOOK AT THE OTHER NEWER SOLUTIONS

electron-packager

electron-builder

windows 10

electron-packager

Linked