How to generate round icons for google pixel 2 (round icon)


#1

Hi guys :slight_smile:

I’m almost ready to deploy my first ionic app to the store.

There is only one small issue left:

After generating the icons with ionic cordova resources and loading the app onto my colleague’s Google Pixel 2, I get the following result:

I’m talking about the app to the right of “Notizen” and to the left of the default ionic icon. It’s orange in the center.

As you can see the phone put a square inside a circle, which looks kinda bad.

How can I fix this?
On iOS and other Android devices (such as Galaxy S7) which use rounded square icons, it looks fine.

Any help would be much appreciated!


#2

Push: Does anyone know how to fix this?


#3

I don’t have a perfect fix, however: you can specific the base icon differently for iOS and Android. Read for example: https://blog.ionicframework.com/automating-icons-and-splash-screens/ (basically, instead of putting icon.png in /resources, put two different ones in /resources/ios and /resources/android, and fool with the Android one until you get what you want. Might involve making the icon expand to overfill the image you provide…


#4

I’m also looking for an answer for this.
Looking at the developer speck

https://developer.android.com/about/versions/nougat/android-7.1.html

Somehow you specify android:icon and android:roundIcon
Do we know if Ionic/Cordova has a setting for round icons vs not round. As we see in screenshots like that not all of the icons are round some people are still using a square one.


#5

I also am wondering if Ionic can do this?

Also does Ionic generate splash screens for iphone x?