Electron-builder: appx - wrong icon / how to set assets

[black-snow]

• Version: 10.6.1

• Target: appx (32/64)

When building for windows store the icon.ico isn't used in a couple places. E. g. the installed software list shows a default electron icon. Start menu as well.
I found those default icons in assets. I haven't yet figured out how to use my own icon for those assets.

[develar]

If you can and want — please file PR.

[black-snow]

Will try, guess I'll have to start here https://github.com/electron-userland/electron-builder/blob/master/src/targets/appx.ts#L49

[develar]

@black-snow Ouch, sorry, it is already implemented :) Just put 44x44.png and other such files into your build resources directory.

if (resourceList.includes(`${size}.png`)) {
  return copy(path.join(packager.buildResourcesDir, `${size}.png`), target)
}

[black-snow]

@develar You sure? I put myappname.44x44.png and the others (50x50, ...) into my build folder but it's still using the default ones.
// ah wait, I must leave out the app name, right?

[develar]

ah wait, I must leave out the app name, right?

Yes. Only size.

[black-snow]

Alright, that works. Some quirks, though.

• Install Screen (dbl click appx) - image is blurry (upscaled)
• Start Menu & Task Bar - icon just looks weird

Sources look okay, though. The images in pre-appx--ia32 are just fine and the manifest seems okay ...
I see that the BackgroundColor is also in the manifest. Maybe we need an option for that.

Do we need more assets? (https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/tiles-and-notifications-app-assets)

Guess we should add a note to the wiki for appx.
P.S.: There's a typo in the wiki. Next to signingHashAlgorithms in the windows section you're missing an r: Fo AppX sha256 is always used. ;)

// edit: Where does the Square150x150Logo etc. in the manifest come from? I can only find Logo and SmallLogo. https://msdn.microsoft.com/library/windows/apps/br211471

[develar]

Fo AppX sha256 is always used.

Thanks, fixed.

Where does the Square150x150Logo etc. in the manifest come from? I

I don't know. To investigate.

@black-snow Would you like to help and fix this issue?

[black-snow]

@develar of course. At first I'll unpack the appx and stuff all the assets in there that a VS plugin generated for me. Will report back.

/edit1: I used this VS plugin to generate a bunch of assets. I stuffed them into the appx/assets but there's still some blurry images. The icon on the install-screen is blurry and the taskbar icon still looks as in the screenshot above. I wonder why there's a BackgroundColor in the manifest - I don't see any other apps having a bg color in the taskbar - gonna research.

/edit2: transparent will default to the accent color but not "remove" the background/inset

/edit3: MS pointed me to this - sadly, the _unplated thing ain't seem to work

[black-snow]

Also there's some manual steps that have to be done in order to publish the appx in the Windows Store. Maybe we can automate these, too. There's four fields in the manifest that need to be set:

• Package.Identity.Name
• Package.Identitiy.Publisher
• Package.Properties.DisplayName
• Package.Properties.PublisherDisplayName

Publisher is already correctly set (CN=...). PublisherDisplayName was correct in my case, too. There might be cases where someone needs to set a different one. I'd say we add an option for each of the remaining three fields. Maybe .build.win.appx.identitiy.name (default author.display name without whitespaces), .build.win.appx.properties.displayName (default productName) and .build.win.appx.properties.publisherDisplayName (default author)?

@develar Shall I open a new issue? Option names okay? I would try to file a PR for this. Doc would also need an update of course.

I haven't fixed the asset thing yet.

[develar]

Shall I open a new issue? Option names okay?

👍 Also, I think, it makes sense to allow any extra properties in the .build.win.appx.properties — just add it to resulting xml as is.

Shall I open a new issue?

PR will be enough if you will prepare it.

[black-snow]

For the icons here's what I had to (thanks to Matteo Pagani from Microsoft):

For the assets:

• get the VS plugin
• create a new universal app project in VS 2015
• remove the existing assets
• drop your own icon into assets (400x400 or bigger)
• rightclick your icon, select generate assets

If you have your assets:

• unpack the electron-builder-generated appx
• copy your own assets into the unpacked assets folder
• edit the manifest:
• 
  
  • set Applications.Application.VisualElements.BackgroundColor to transparent
  
  
• 
  
  • set Applications.Application.VisualElements.Square150x150Logo to assets\Square150x150Logo.png
  
  
• 
  
  • Square44x44 and Wide310x150 analogue
  
  
• 
  
  • set Properties.Logo to assets\NewStoreLogo.png
  
  
• now open the VS2015 native cmd (x86 for 32bit / x64 for 64bit)
• navigate to the unpacked files
• run makepri createconfig /cf priconfig.xml /dq en-US /pv 10.0.0 (for win10)
• run makepri new /pr . /cf priconfig.xml
• cd ..
• run `makeappx pack -d ".\your_unpacked_files" -p "name_of_the_appx.appx" -l
• and optionally sign signtool.exe sign -f path\to\your\cert.pfx -fd SHA256 -v .\name_of_the_appx.appx

Key was the -l (or /l) option for makeappx.exe plus the generated unplated asset versions.

---

That's quite a bunch of steps. I fear I have no time this year left to work on this :|
Guess I'll start with adding the props to the manifest.

[black-snow]

https://github.com/electron-userland/electron-builder/pull/1017 for the extra custom properties

[develar]

@black-snow Did you successfully submit appx to windows store?

[black-snow]

@develar yup. I'm still thinking of automating the assets workflow.

[baldash]

@black-snow Hi, upping a 2 years old issue but, any easier way found to do this ? I'm struggling with the same error (blurry / margin in taskbar icon)

[black-snow]

@baldash sadly no - I haven't revisited this issue since then. But let me hear if you find anything new!

[baldash]

@black-snow your instructions were very helpful, I fixed my main problem thanks to them !

but I still have one last issue, even when tweaking the target-size and target-size_unplated values, my icon doesn't seem to change its size:

Do eventually remember anything in relation to that ? That could be helpful ^^

(I followed everything except the VS part cause I already had my set of icons)

[baldash]

Okay fixed I'm just a bad person who doesn't read the doc properly. The issue was that for a resource named "SampleAppx.44x44.png", I created a SampleAppx.targetsize-44_altform-unplated AND a SampleAppx.targetsize-44.png.

So, two things here

1. The name is wrong -> for SampleAppx.44x44.png you should create a file named SampleAppx.44x44.targetsize-44_altform-unplated.png

2. You only need the targetsize-44_altform-unplated.png file and not the targetsize-44.png file

Ref link: https://docs.microsoft.com/en-us/windows/msix/desktop/desktop-to-uwp-manual-conversion