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

i followed cordova.apache.org/docs/en/latest/config_ref/… and for me it was working good. you can try..or if persist same error then try to set different random image icon for test.. — Naitik

TruthSeeker TruthSeeker · Accepted Answer · 2016-06-02T15:54:20

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,

Create a 48px by 48px png version of your icon image
save it as Square44x44Logo.targetsize-48.png and Square44x44Logo.targetsize-48_altform-unplated.png
Copy both the files into res\icons\windows folder of your project
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.

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

2 Answers