Why are the edges of my app icons being cut off?

Question

I have this png image that I want to use as the icon for my application:

I use this on a web application as the save to home screen icon:

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />

But when I put it on the home screen, it cuts off the corners of the icon:

And the same issue happens when I build an Android app with Meteor, with resized versions of the same image configured as the android_mdpi/android_hdpi/android_xhdpi/android_xxhdpi/android_xxxhdpi icon:

How can I prevent the edges of my icon being cut off like this?

Answer 1

Depending on your launcher users can change the icon shape on their phone and it automatically changes your icon to the chosen shape. You can change this at Home Settings -> Change Icon Shape

So you can not prevent the edges being cut off, but in your app, you can define different icons for the different shapes. More information about the adaptive icons: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive