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

User · Answer

win   new BrowserWindow  width  1000  height  1000 icon    dirname     logo png         png or   ico will also work   in my case it worked

User · Answer

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

User · Answer

Updated package json    build        appId    com my-website my-app      productName    MyApp      copyright    Copyright    2019   author       mac          icon      public icons mac icon icns        lt ---------- set Mac Icons      category    public app-category utilities          win          icon      public icons png 256x256 png   lt ---------- set Win Icon         files            build               dist               node modules               public               lt ---------- need for get access to icons        js          directories          buildResources    public   lt ---------- 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Below is the solution that i have    mainWindow   new BrowserWindow  width  800  height  600 icon    dirname     Bluetooth ico

User · Answer

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

[icons] How to set app icon for Electron / Atom Shell App

Examples related to icons

Examples related to electron