Why is The size of Taskbar Icon of my Windows 10 Universal App built with Apache Cordova is Smaller than Other Apps

Question

I am using Visual Studio 2015 and Apache Cordova for making my UWP app. But the taskbar icon for my app is looking smaller than all other apps beside it.

The rightmost icon is showing for my app. As you can see it is smaller (looks like a padded version on all 4 sides) than all the other icons placed at the left of it.

This is the actualSquare44x44Logo.scale-100.png, as you can see below, there is no padding in my image

I have followed Visual Studios' project template for Apache Cordova and here is my icon declaration in my config.xml

   <platform name="windows">
        <icon height="150" src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" />
        <icon height="360" src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" />
        <icon height="30" src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" />
        <icon height="310" src="res/icons/windows/Square310x310Logo.scale-100.png" width="310" />
        <icon height="106" src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" />
        <icon height="70" src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" />
        <icon height="170" src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" />
        <icon height="50" src="res/icons/windows/StoreLogo.scale-100.png" width="50" />
        <icon height="120" src="res/icons/windows/StoreLogo.scale-240.png" width="120" />
        <icon height="150" src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" />
        <icon height="360" src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" />
        <icon height="44" src="res/icons/windows/Square44x44Logo.scale-100.png" width="44" />
        <icon height="71" src="res/icons/windows/Square71x71Logo.scale-100.png" width="71" />
    </platform>

Question

How to make the icon of my app on the taskbar equal to all other icons present to the left of it.

Any idea?

Thanks.

Edit After Issue Resolve

Just wanted to share the fruit. Thanks to @TruthSeeker my taskbar icon now looks like,

Thanks :)

Answer 1

Changing things directly to project folder->platforms->windows->images folder might work but I don't think that is a good idea. Rather we should put our image resources into res folder and let visual studio put things into correct places during build.

So, try these steps,

1. Create a 48px by 48px png version of your icon image
2. save it as Square44x44Logo.targetsize-48.png and Square44x44Logo.targetsize-48_altform-unplated.png
3. Copy both the files into res\icons\windows folder of your project
4. Now, time to edit the config.xml file

Add the 2 files in your config.xml (after whatever you have, it should work)

<icon src="res/icons/windows/Square44x44Logo.targetsize-48.png" target="Square44x44Logo"/>
<icon src="res/icons/windows/Square44x44Logo.targetsize-48_altform-unplated.png" target="Square44x44Logo" />

Now, build and run your app.

If still it doesn't work, empty the folder project folder->platforms->windows->images and then again run it. Now you will be able to see an unplated tile.

Hope it helps.

Thank you.

Answer 2

By default it's using a plated icon. You can create a unplated icon for windows platform by following steps:

1. Create a 48x48 icon image from your original image.
2. Copy it into two files: "Square44x44Logo.targetsize-48.png" and "Square44x44Logo.targetsize-48_altform-unplated.png".
3. Copy them to project folder->platforms->windows->images folder.
4. Run the app, you will see the change.

For details of icons on windows platform you can refer to this document:Guidelines for tile and icon assets