Appx build shows accent color behind the icon in the taskbar.

• Electron-Builder Version: 22.11.7

• Node Version: v14.16.0

• Electron Version: 13.2.0

• Electron Type (current, beta, nightly):

• Target: Windows (appx)

The appx build shows a background behind the logo when building an Appx. The NSIS build shows the icon correctly (without background colour).

wrong: correct:

my package.json is:

"build": {
   "protocols": {
     "name": "xxxxx",
   },
   "directories": {
     "buildResources": "Resources"
   },
   "extends": null,
   "productName": "xxxxx",
   "appId": "zz.yyyyyy.xxxxx",
   "files": [
     "build/**/*",
     "electron/*",
     "resources/**/*",
     "electron/icons/*",
     "icons/*"
   ],
   "appx": {
     "identityName": "yyyyyy.xxxx",
     "backgroundColor": "transparent",
     "publisher": "CN=...",
     "publisherDisplayName": "yyyy",
     "displayName": "xxxx"
   },
   "win": {
     "target": "nsis",
     "icon": "Resources/appx/StoreLogo.png",
     "publisherName": "yyyyy",
     "certificateFile": "certs/yyyy-CodeSigning.pfx",
     "certificatePassword": "...",
     "extraResources": [
       "electron/bin/*.exe"
     ],
     "verifyUpdateCodeSignature": true
   }
 }

my Resources/appx consists of: Square44x44Logo.png (size 44x44px) Square150x150Logo.png (size: 150x150px) StoreLogo.png (size: 256x256px) Wide310x150Logo.png (size: 310x150px)

[ci010]

Has someone found a solution for this annoying issue?

I referred the translucentTB package, and found that we need many trailor to make it work in most cases.

My icons: https://github.com/Voxelum/x-minecraft-launcher/tree/master/xmcl-electron-app/icons

Note1: Ignore the thing before @. My build script will copy the [e-mail]-400_theme-light.png to SmallTile.scale-400_theme-light.png in final package.

Note2: Ignore the theme trailor. It just for different os theme and does not affect background.

I believe the unplated trailor in Square44x44Logo.targetsize-256_altform-unplated.png is the key to resolve background issue.

You can find the actual meaning of trailor: https://docs.microsoft.com/en-us/windows/uwp/app-resources/tailor-resources-lang-scale-contrast

Also the logo definition to verify my assumption about unplated: https://docs.microsoft.com/en-us/windows/apps/design/style/app-icons-and-logos

[Fabio286]

I believe the unplated trailor in Square44x44Logo.targetsize-256_altform-unplated.png is the key to resolve background issue.

I can’t believe it, I can finally say goodbye to the background color. Thank you very much!