While creating windows appx package electron-builder is taking default icon for app

[NehaTawar]

• Version: 20.40.2

• Target: windows

I am creating my app using ionic cordova and after creating build for windows. Using electon-builder to create the appx file. By default appx is getting created inside dist folder. Now the issue which I am facing is whenever I create a build while launching I see only electron default Icon, even if i did set the buildDerectories and icon property properly.

I have set properties in package.json file as below:

{ 
     "build": {
        "extraFiles": [
          "some-internal-plugin-dist"
        ],
        "appId": "myCompany.myApp",
        "nsis": {
          "perMachine": true,
          "oneClick": false,
          "allowToChangeInstallationDirectory": true
        },
        "squirrelWindows": {},
        "files": [
          "electron.js",
          "www/**/*"
        ],
         "directories": {
        "buildResources": "www/build"
        },
        "appx": {
          "identityName": "myCompany.myApp",
          "publisher": "CN=number",
          "publisherDisplayName": "my publisher name",
          "applicationId": "myApp",
          "displayName": "myApp"
        },
        "win": {
          "certificateFile": "./certs/CordovaApp.wincert.pfx",
          "icon":  "www/build/win.ico",
          "publisherName": "my Company",
          "target": [
            {
              "target": "nsis",
              "arch": [
                "ia32"
              ]
            }
          ]
        },
        "nodeGypRebuild": "false",
        "npmRebuild": "false"
      }
    }

Please let me where am i doing wrong and what exactly should I set the properties? How and where to specify the assets all the assets for windows? So to resolve this can anyone please help?

[semireg]

I don't know why yours isn't working correctly, but I can share details of my app's setup.

Here's a photo of my icons in vscode.

Here's the relevant properties in my "build" from package.json:

  "build": {
    "productName": "Label LIVE",
    "appId": "com.semireg.LabelLIVE",
    "buildVersion": "10305001",
    "artifactName": "${productName}-${version}-${buildVersion}.${ext}",
    "generateUpdatesFilesForAllChannels": false,
    "buildDependenciesFromSource": true,
    "nodeGypRebuild": false,
    "npmRebuild": false,
    "files": [
      "dist/",
      "node_modules/",
      "app.html",
      "main.prod.js",
      "main.prod.js.map",
      "package.json",
      "embedded.provisionprofile"
    ],
    "win": {
      "target": [
        "nsis"
      ],
      "extraFiles": {
        "from": "app/win-dlls/"
      }
    },
    "nsis": {
      "oneClick": true,
      "perMachine": false,
      "warningsAsErrors": true,
      "runAfterFinish": true
    },
    "appx": {
      "publisher": "CN=122121212-12121-1212-12121-121212121212",
      "backgroundColor": "transparent"
    },
    "directories": {
      "buildResources": "resources",
      "output": "release"
    },
  },

For exact sizes of the images you'll want to consult https://www.electron.build/configuration/appx#appx-assets.

Now, after all this, my setup still isn't perfect. My icon is still too small, but it's something I'm living with for the moment.

Strangely, when I build with NSIS I get a good looking icon:

😕

[NehaTawar]

sure will try and let you know @semireg

[NehaTawar]

This is what worked for me:

1. Downgraded electron-builder version to: 20.39.0
2. Changed the directories entry in package.json as :

   
     "buildResources": "build",
     "output": "build"}

3. Created appx named folder inside the build directory and created the build directory at package.json level
4. Added icon named "StoreLogo.png" inside build/appx directory that we have created earlier.
5. add the entry of the same in :

   "win": {
   "icon":"build/appx/StoreLogo.png"
   }

6. After this just create the appx using electron-builder -w appx command

While installing the appx now i am able to see logo on launcher/install popup screen. Now I have one more doubt after complete installation i am still seeing the default electron logo at the task-bar and also in the apps & features if i search for my application. So can anyone please help me to resolve this issue?

[NehaTawar]

On the launcher/install popup i am able to see the app logo like below hidden with red color:

After installing and launching the app i am still able to see the default electron icon in the taskbar as below highlighted in red:

Also in the installed app also after searching for my app i am getting the default electron icon as below highlighted in red:

How can i resolve this one? I tried adding all related resources as mentioned in : https://www.electron.build/configuration/appx but it started giving error of invalid manifest when creating a appx

[NehaTawar]

Solved the above issue using below steps:

1. Added the assets mentioned in the appx link: https://www.electron.build/configuration/appx

2. created appx folder in the build directory, keep the package.json as mentioned above.

3. Make sure the app logos named should be specific as metioned in the link .PNG format.

4. Earlier i had icon names as e.g Square44x44Logo.png format .PNG then after changing the name to Square44x44Logo kept format .PNG as it is I was able to solve installed app issue.

   But now only one icon is not getting replaced i.e when we search for app in windows in the best match still default electron icon is seen. Adding screenshot for the same :

Can anyone please help me to resolve this?

[NehaTawar]

Able to resolve all the issues here is reference for the last issue mentioned in comment https://github.com/electron-userland/electron-builder/issues/3910 , but I really feel the documentation need to be updated properly.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wildhart]

@NehaTawar, did you ever get the "Best Match" icon fixed? I have the same issue, all my other icons are OK.