Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

appx - wrong icon / how to set assets #987

Closed
black-snow opened this issue Dec 7, 2016 · 18 comments
Closed

appx - wrong icon / how to set assets #987

black-snow opened this issue Dec 7, 2016 · 18 comments

Comments

@black-snow
Copy link
Contributor

  • 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
Copy link
Member

develar commented Dec 7, 2016

If you can and want — please file PR.

@develar develar added the feature label Dec 7, 2016
@black-snow
Copy link
Contributor Author

@develar
Copy link
Member

develar commented Dec 7, 2016

@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
Copy link
Contributor Author

black-snow commented Dec 7, 2016

@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
Copy link
Member

develar commented Dec 7, 2016

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

Yes. Only size.

@black-snow
Copy link
Contributor Author

black-snow commented Dec 7, 2016

Alright, that works. Some quirks, though.

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

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
Copy link
Member

develar commented Dec 14, 2016

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
Copy link
Contributor Author

black-snow commented Dec 14, 2016

@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
Copy link
Contributor Author

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
Copy link
Member

develar commented Dec 15, 2016

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
Copy link
Contributor Author

black-snow commented Dec 15, 2016

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
Copy link
Contributor Author

#1017 for the extra custom properties

@develar
Copy link
Member

develar commented Jan 11, 2017

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

@develar develar closed this as completed Jan 11, 2017
@black-snow
Copy link
Contributor Author

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

@baldash
Copy link

baldash commented Oct 30, 2019

@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
Copy link
Contributor Author

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

@baldash
Copy link

baldash commented Nov 5, 2019

@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:

taskbar-icon-problem-2

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
Copy link

baldash commented Nov 5, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants