How to set app icon for Electron / Atom Shell App

icons electron

161,598

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

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

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:

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

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.

View more solutions

161,598

Jo E.

Updated on March 10, 2022

Comments

Jo E. about 2 years

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?
- onmyway133 over 6 years
  
  You can follow github.com/onmyway133/blog/issues/66
- theram almost 5 years
  
  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.
cwhisperer almost 9 years

Can you fix this answer to be accurate wrt Windows please?
Alex Warren almost 9 years

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.
Chet about 8 years

This worked at first, but then I sent the distributable app to my friend and it didnt work! Any ideas?
Nick almost 8 years

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"
Rajesh almost 8 years

@Nick you will need to do something like the following electron-packager . YourApplicationName --all --icon "path/to/my/icon.ico"
Chunky Chunk about 7 years

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.
Robert Masen almost 7 years

This is amazing, thank you for this. I did need to drag and drop to get it to work but amazing nonetheless.
Konstantin almost 7 years

Worth mentioning that __dirname is the path of your /src/ folder (i.e. the folder of your app.js/main.js file).
Johann over 6 years

Complete instructions: support.apple.com/kb/PH25383?locale=en_US
ishandutta2007 almost 6 years

.icns not needed ?
PedroPovedaQ over 5 years

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
Dave about 5 years

This seems to only work for development. When I run 'yarn dist', the icns file gets replaced with the default electron one.
Mia about 5 years

@Dave Actually he said 6. Enjoy your icon during *development* :-)
alexrjs about 5 years

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... ;-)
keul over 4 years

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 gist.github.com/fabiofl/5873100#gistcomment-1320553
jmchauv over 4 years

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...
Anil8753 almost 4 years

sure about mac?
Edison Pebojot about 3 years

how to create .ico file, is there any online tool?
Sh4m about 3 years

@EdisonPebojot search on google "online ico creator" there are plenty of ico creater.
Srdjan Milic almost 2 years

IntelliJ suggested that is better to write: icon: path.join(__dirname, 'icons/png/256x256.png')
S.B. almost 2 years

'build' in the application package.json is not supported since 3.0 anymore