Can't Add Icon To Electron App With Electron Builder

Question

I have made an app with Electron and am trying to package it with Electron Builder.

Link to repository

Does not contain node_modules folder: Repo here

I have a folder named build with my icon.ico in it and my package.json is as follows:

{
    "name": "attendant",
    "productName": "Attendant",
    "version": "0.1.0",
    "description": "A simple app to streamline web development by allowing you index.html to open on a live server in the default browser",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "pack": "electron-builder --dir",
        "dist": "electron-builder"
    },
    "devDependencies": {
        "electron": "^8.0.1",
        "electron-builder": "^22.3.2"
    },
    "build": {
        "appId": "com.attendant",
        "win": {
            "icon": "./build/icon.png",
            "title": "Attendant",
            "msi": true
        }
    }
}

However, I receive the following error:

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any ideas why this happening and how to fix it?

With the following package.json:

{
    "name": "attendant",
    "productName": "Attendant",
    "version": "0.1.0",
    "description": "A simple app to streamline web development by allowing you index.html to open on a live server in the default browser",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "pack": "electron-builder --dir",
        "dist": "electron-builder build"
    },
    "devDependencies": {
        "electron": "^8.0.1",
        "electron-builder": "^22.3.2"
    },
    "build": {
        "appId": "com.attendant",
        "directories": {
            "buildResources": "build"
        },
        "win": {
            "icon": "build/icon.png",
            "title": "Attendant",
            "msi": true
        }
    }
}

I receive the error:

yarn dist
yarn run v1.22.0
warning package.json: No license field
$ electron-builder build
  • electron-builder  version=22.3.2 os=10.0.18363
  • loaded configuration  file=package.json ("build" field)
  • author is missed in the package.json  appPackageFile=C:\Users\alexr\Documents\GitHub\attendant-app\app\package.json
  ⨯ Invalid configuration object. electron-builder 22.3.2 has been initialised using a configuration object that 
does not match the API schema.
 - configuration.win should be one of these:
   object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? } | null
   -> Options related to how build Windows targets.
   Details:
    * configuration.win has an unknown property 'title'. These properties are valid:
      object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, 
generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }
    * configuration.win has an unknown property 'msi'. These properties are valid:
      object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, 
generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }
     How to fix:
     1. Open https://www.electron.build/configuration/win
     2. Search the option name on the page (or type in into Search to find across the docs).
       * Not found? The option was deprecated or not exists (check spelling).
       * Found? Check that the option in the appropriate place. e.g. "title" only in the "dmg", not in the root. 
  stackTrace=























                                                                   ValidationError: Invalid configuration object. electron-builder 22.3.2 has been initialised using a configuration object that does not match the API schema.   























                                                                    - configuration.win should be one of these:  























                                                                      object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? } | null























                                                                      -> Options related to how build Windows targets.























                                                                      Details:























                                                                       * configuration.win has an unknown property 'title'. These properties are valid:























                                                                         object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }























                                                                       * configuration.win has an unknown property 'msi'. These properties are valid:























                                                                         object { additionalCertificateFile?, appId?, artifactName?, asar?, asarUnpack?, certificateFile?, certificatePassword?, certificateSha1?, certificateSubjectName?, compression?, cscKeyPassword?, cscLink?, detectUpdateChannel?, electronUpdaterCompatibility?, extraFiles?, extraResources?, fileAssociations?, files?, forceCodeSigning?, generateUpdatesFilesForAllChannels?, icon?, legalTrademarks?, protocols?, publish?, publisherName?, releaseInfo?, requestedExecutionLevel?, rfc3161TimeStampServer?, sign?, signAndEditExecutable?, signDlls?, signingHashAlgorithms?, target?, timeStampServer?, verifyUpdateCodeSignature? }























                                                                        How to fix:























                                                                        1. Open https://www.electron.build/configuration/win























                                                                        2. Search the option name on the page (or type in into Search to find across the docs).























                                                                          * Not found? The option was deprecated 
or not exists (check spelling).























                                                                          * Found? Check that the option in the appropriate place. e.g. "title" only in the "dmg", not in the root.















































                                                                       at validate (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\@develar\schema-utils\dist\validate.js:50:11)























                                                                       at validateConfig (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\util\config.ts:229:3)























                                                                       at Packager._build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:342:5)























                                                                       at Packager.build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:337:12)























                                                                       at executeFinally (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\promise.ts:12:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Edit number 2

I am now receiving the following error:

yarn run v1.22.0
warning package.json: No license field
$ electron-builder build
  • electron-builder  version=22.3.2 os=10.0.18363
  • loaded configuration  file=package.json ("build" field)
  • author is missed in the package.json  appPackageFile=C:\Users\alexr\Documents\GitHub\attendant-app\app\package.json
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=8.0.1 appOutDir=dist\win-unpacked
  • asar usage is disabled — this is strongly not recommended  solution=enable asar and use asarUnpack to unpack 
files that must be externally available
  ⨯ cannot execute  cause=exit status 1
                    errorOut=Fatal error: Unable to commit changes

                    command='C:\Users\alexr\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.5.0\rcedit-x64.exe' 'C:\Users\alexr\Documents\GitHub\attendant-app\app\dist\win-unpacked\Attendant.exe' --set-version-string FileDescription Attendant --set-version-string ProductName Attendant --set-version-string LegalCopyright 'Copyright © 2020 Attendant' --set-file-version 1.1.0 --set-product-version 1.1.0.0 --set-version-string InternalName Attendant --set-version-string OriginalFilename '' --set-icon 'C:\Users\alexr\Documents\GitHub\attendant-app\app\dist\.icon-ico\icon.ico'
                    workingDir=
  ⨯ C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE  stackTrace=

                                                  Error: C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

                                                      at ChildProcess.<anonymous> (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\util.ts:239:14)

                                                      at Object.onceWrapper (events.js:313:26)

                                                      at ChildProcess.emit (events.js:223:5)

                                                      at maybeClose (internal/child_process.js:1021:16)

                                                      at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)

                                                  From previous event:

                                                      at processImmediate (internal/timers.js:439:21)

                                                  From previous event:

                                                      at WinPackager.signApp (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\winPackager.ts:357:27)

                                                      at WinPackager.doPack (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\platformPackager.ts:243:16)

                                                      at WinPackager.pack (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\platformPackager.ts:114:5)

                                                      at Packager.doBuild (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:444:9)

                                                      at executeFinally (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\promise.ts:12:14)

                                                      at Packager._build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:373:31)

                                                      at Packager.build (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\src\packager.ts:337:12)

                                                      at executeFinally (C:\Users\alexr\Documents\GitHub\attendant-app\app\node_modules\app-builder-lib\node_modules\builder-util\src\promise.ts:12:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

thanks for the support so far

Answer 1

"build":{
    "productName":"yourProductName",
    "appId":"org.yourProductName",
    "dmg":{
        "contents":[
            {
                "x":130,
                "y":220
            },
            {
                "x":410,
                "y":220,
                "type":"link",
                "path":"/Applications"
            }
        ]
    },
    "win":{
        "target":[
            "nsis",
            "msi"
        ]
    },
    "linux":{
        "target":[
            "deb",
            "rpm",
            "snap",
            "AppImage"
        ],
        "category":"Development"
    },
    "directories":{
        "buildResources":"resources",
        "output":"release"
    },
    "files: ["resources/**/*"], // including buildResources folder in order to use this in the code
        },"

I attached example electron-builder configuration that I configured for my project before. Please consider this part

"directories": {
    "buildResources": "resources",
    "output": "release"
}

buildResources should include resource files like icons. If you are not going to set this buildResources manually then the default will be build. output is indicating where the packaged app will be after packaging and it's optional for your issue. Anyhow, I've set the project to generate release artifacts on the "release" folder.

In this project, I'm saving the icons in the project root directory like below. I don't know where your icon files are so I've attached the project structure that is working with this build configuration.

Answer 2

I Just went through your logs, I found the below error,

configuration.win has an unknown property 'title'. These properties are valid:

The title of the app should be given in productName property. The title keyword is invalid according to the document.

Also, I figured out there is buildResources that is missing in the build configurations. I recommend using .ico file for icons instead of png images.

"scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder build"
},
"build": {
    "productName": "Attendant",
    "appId": "com.experiment.attendant",
    "directories": {
        "buildResources": "build"
    },
    "files": [
      "build/**/*",
    ],
    "win": {
        "asar": false,
        "target": "nsis",
        "icon": "build/icon.ico"
    },
    "nsis": {
      "installerIcon": "build/icon.ico",
      "installerHeaderIcon": "build/icon.ico",
      "deleteAppDataOnUninstall": true
    },
}

For more configurations,

1. Common Configurations
2. Windows Configurations

See the working example for windows and Linux configurations. GITHUB