ionic android icon not same original size/ratio

Question

I have created a simple 1024x1024 icon.png under resources/ :

Then i run ionic resources and all the icons i need are generated under resources/android/icon/

My config.xml is changed to this:

<platform name="android">
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
  </platform>
  <icon src="resources/android/icon/drawable-xhdpi-icon.png"/>

Now if i look at the app icon once installed it looks like the figure in the middle is bigger and ratio is not respected:

As you can see, the little red ball became a huge ball, this is something i don't understand, can anybody clarify me this?

Answer 1

(Can't place comments yet, so I'll do it by answering)

By the looks of it you're using an iconpack of some sort. (Since all the icons have the same shaped background with the original icon on top). My guess is that the icon pack eliminates most of the transparent space surrounding your icon (and all others), to fit the same icon design.

You can easily find out if this is indeed the case by either:

• disabling the iconpack (the red circle should be normal sized now, with the surrounding whitespace)

• making an icon with a border around the sides of the icon, so it probably won't cut off the whitespace.

If it is indeed the iconpack that's eliminating the surrounding whitespace, you could try to have a very light (99% transparent) layer as a background. This will prevent the iconpack from eliminating whitespace, so it won't scale the circle.

I wouldn't really recommend this though, since most people won't use an icon pack and then the icon could look a little strange on other devices.