I ate my computer

In 2017 when I posted about my Markdown editor side project it was still a UWP application built for Windows 10.

Fast forward to 2023, and it’s now a Windows App SDK running exclusively on Windows 11.

At the time I had the icon made by a friend, which provided everything needed for an UWP app, the « only » thing I had to do was drag and drop everything in the Package.appxmanifest and it was done.

I thought it would be as easy to do it for a Windows App SDK app, unfortunately no.

Obviously I could have used the same icon and it was done, but it means I would have added icons no longer used by Windows 11 and would have to maintain them. Also an icon for a Windows 11 app is a bit different.

When designing I followed the recommendation provided by Microsoft and used a 48x48 grid, and the background was transparent.
My icon almost take the whole width and height of the grid, and it is rendered nicely in the TaskBar, StartMenu, etc...

As a reminder, for an UWP app you have to provided those icons:

Square44x44Logo at 100, 125, 150 200 and 400 scale
Square44x44Logo at 16, 20, 24, 30, 32, 36, 48, 60, 64, 72, 80, 96 and 256 pixel
Square71x71Logo at 100, 125, 150 200 and 400 scale
Square150x150Logo at 100, 125, 150 200 and 400 scale
Square310x310Logo at 100, 125, 150 200 and 400 scale
Wide310x150Logo at 100, 125, 150 200 and 400 scale
SplashScreen at 100, 125, 150 200 and 400 scale
BadgeLogo at 100, 125, 150 200 and 400 scale
StoreLogo at 100, 125, 150 200 and 400 scale

Some of them are optional, but I think having them all is better.

Now for Windows 11 Desktop app, there some changes. First apps no longer have Splashscreen, the OS no longer show Tiles, which means we no longer need SplashScreen, Square71x71Logo, Square150x150Logo, Square310x310Logo, Wide310x150Logo.

If we refer to this articles from the Microsoft documentation the only icons required is the AppList, StoreLogo and for compatibility reason the MedTile at 100 scale to submit to the Windows Store.

AppList is the equivalent of the Square44x44Logo, and MedTile is the Square150x150Logo

Which should leave us with the following icons:

AppList at 100, 125, 150, 200 and 400 scale
AppList at 16, 20, 24, 30, 32, 36, 48, 60, 64, 72, 80, 96 and 256 pixel
MedTile at 100 scale
StoreLogo at 100, 125, 150, 200 and 400 scale

Which is obvioulsy a lot less. We also know, that in the end, only AppList and StoreLogo will be used. Question is where?

AppList issue

Weirdly in was not the case in the Installed app menu, the icon is displayed on a blue background like this:

But with an almost border to border icon it was ugly, with only bits of blue appearing in the transparency.

I didn’t wanted to edit my icon and add a margin around it, or the sizing would have been off with other stock app ¹. So after a bit of search looking at the Assets folder of installed app, and a few tests, it turns out this place used the AppList scaled icons, I don’t know which one, so I updated the 100 to 400 scale icon to have a margin, and now it works well.

StoreLogo issue

The Package.appxmanifest suggest to provide the StoreLogo in the following size: 50x50, 63x63, 75x75, 100x100, 200x200. The Windows dashboard when submitting an app propose to use uploaded logo for the store instead of those in the package, but this time the size are: 71x71, 150x150, 300x300, as you can see none of them match the package one. ²

Also we are never provided with good information about where it will be used and at which size.

Like the other my StoreLogo almost took the whole width and height and the render in the store was ugly.

Like this:

instead of something like this:

I finally opted to create a new Logo for the Windows Store with a margin and a background, and upload them myself on the dashboard.

Windows Tab and Taskbar thumbnail

Last failing icon was the App icon when using Alt+Tab or when showing the app window thumbnail when overring in the task bar. It was displaying the default Windows application logo.

For this one you need to create an « old » .ico file, that you will provide in the properties of the Visual Studio Project.

For mine I kept the « marginless » icon and provided the 16, 32, 48, 64, 128 and 256 size.

Summarize

Here is a recap of what’s needed for your app icon for a Windows 11, Windows App SDK app.

• Design your icon based on the 48x48 grid, with transparency.
• AppList at 16, 20, 24, 30, 32, 36, 48, 60, 64, 72, 80, 96 and 256 pixel

  This should be directly based on the designed icon.

• AppList at 100, 125, 150, 200 and 400 scale

  Based on the 48x48 icon create those one by adding a bit more margin to have a nice render in the Windows Installed App list (and other places I don’t know about).

• MedTile at 100 scale

  Do whatever you want, mine is just and bigger version of the 48x48 icon, and it won’t be used.

• StoreLogo at 100, 125, 150, 200 and 400 scale

  Don’t use the Package one, craft your icon at 300x300, 150x150 and 71x71 as you want it displayed in the Store and upload it in the dashboard.

• .ico file 16, 32, 48, 64, 128 and 256 pixel

  Still based on the 48x48 icon, create a 256x256 version and let a tool generate this icon for you, for this I used. https://www.icoconverter.com

• Unplated and LightUnplated AppList icon

  You can use the same as AppList.

Done 🙂. I hope it will help you!