How to change app icon using electron-builder

Question

I changed my app icon and for some reason I can not update the icon (currently has the icon of an electron).

Relevant modules I use:

 "electron-builder": "5.7.0",
 "electron-prebuilt": "^ 1.4.13"

my package.json:

    "build": {
        "appId": "com.siemens.dmv",
        "asar": true,
        "win": {
          "target": "squirrel",
          "icon": "./build/icon.ico",
          "title": "DigitalManufacturingViewer",
          "msi": true,
          "IconUrl": "data: image / png; base64, 
          AAABAyUAJSshACMLBAAeJRAAAw0VAAYPEQAFJzsAE // (long string)
}

I tried several orders without success, does anyone know what command I have to run?

you should add your icon in app directory under root (not in build) and just give the url like app/icons/icon.ico — NiranjanK, Jan 22 '18 at 05:07
You should create your icon as an .ico file (for Windows icon) and place it in your project. If you use @Nir's example directory of "app/icons/icon.ico". Then in your package.json under you should change "IconUrl" to "icon" and add the path to the the .ico file. It should look something like this: `"win": { "icon": "app/icons/icon.ico" }` — Herm Wong, Jan 31 '18 at 23:59

score 6 · Answer 1 · edited Nov 29 '21 at 05:52

6

Make icon.ico (for Windows and Linux) and icon.icns (for Mac) and place them in the build directory.

Remove the other "icon" properties from the config. the build directory is the default location where electron builder searches for the icons.

Also try updating the electron-builder version. The version you are using is about 2 years old. A lot of features and bugfixes related to icons have been made in the new versions.

edited Nov 29 '21 at 05:52

Vivaan

141
2
14

answered Jan 24 '18 at 16:25

Tarak

479
4
5

Why is it `icon.icns` for linux/mac rather than, for example, `icon.png`? – icc97 Nov 26 '18 at 12:53
1

@icc97 It mostly does not matter. You can use icon.png and electron-builder will automatically create icns/ico files during the build process. But that has caused some issues with .deb builds for me I don't recommended using ico/icns files. – Tarak Nov 27 '18 at 17:05
@icc97 icns is an icon set - it is effectively a folder of different resolution icons so that your application icon can scale nicely in different scenarios (eg: one for task switcher vs icon for when the app appears in finder etc). This explains more: https://blog.macsales.com/28492-create-your-own-custom-icons-in-10-7-5-or-later/ – ndtreviv Sep 24 '19 at 13:42

score 4 · Answer 2 · answered Aug 02 '20 at 22:11

Electron Builder by default looks for assets in the build folder:

./build/
    background.png
    background@2x.png
    icon.icns
    icon.ico
    icon.png

Icon names are listed in the docs: https://www.electron.build/icons

You can configure the build folder path in your package.json using:

{
  "name": "your-app",
  "version": "0.0.1",
  "build": {
    "files": [
      "custom/directory"
    ],
    "directories": {
      "buildResources": "custom/directory"
    }
  }
}

Make sure that files are copied using the files attribute. As mentioned in the configuration docs: https://www.electron.build/configuration/configuration#configuration

score 0 · Answer 3 · edited Nov 29 '21 at 10:17

0

For Linux,

Place icon.png in the directory /build/icons

https://www.electron.build/icons

edited Nov 29 '21 at 10:17

Vivaan

141
2
14

answered Aug 14 '21 at 14:26

Lee

29,398
28
117
170

How to change app icon using electron-builder

3 Answers3