app icon has white circle around it for android on phonegap/cordova

Question

I updated phonegap, and now the Android icon shows a white circle around it like 1/2 of the icons on my phone. I don't want the white circle.

Attached shows the Arlo icon which is normal, then two other icons with white circles around them. My config.xml has the icons listed to a png that does not look like this.

How can I get my icon without the circle again, like the Arlo icon?

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

check [this](https://developer.android.com/studio/write/image-asset-studio.html) example — proofzy, Feb 21 '18 at 08:10
Please update if you found a solution. I'm having the same issue, only it popped up on a recent build. My guess is it has something to do with an Android update since I didn't change any icon resources or regenerate (I'm using ionic 3) — Andrew Barta, Jul 03 '18 at 03:10

score 4 · Accepted Answer · answered Jul 03 '18 at 18:57

I did fix it but I honestly can't recall exactly everything I did. Here's what I remember for sure.

1) I updated to cordova 8.0.0 (not sure if this is required)

2) Removed all android icon configs from config.xml, except I left:

<icon src="icon.png" />

3) Generate Adaptive Icons with Android Studio (Pretty easy): https://developer.android.com/studio/write/image-asset-studio#create-adaptive

The following steps must be done every time you use phonegap prepare android (or cordova prepare android), and of course if you rm/add the platform.

4) Copy the generated drawable/values folders/files from Android Studio to approot/platforms/android/app/src/main/res

5) Double check the approot/platforms/android/app/src/AndroidManifest.xml has this piece:

<application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">

There's probably a better way, but my app is working with adaptive icons and I'm happy. Hopefully this helps. Sorry I cannot remember all the details!

This got me on the right track of an answer, thank you! I posted my solution below, one that doesn't require mucking with the platforms directory. — heykatieben, Sep 19 '19 at 19:12

score 2 · Answer 2 · answered Sep 19 '19 at 19:11

Zomg, way late but I spent 2 hours figuring this out and want to share!

I used Android Studio to create the icon, starting from a new blank project. I was able to figure out how to get to the icon generator from the description here, though I feel like I got lucky finding it, so if you need it, you can pay the $40 to view the video to see where that interface is. Then, I copied the files generated from the /app/src/main/res folder in that project, to my /res/icons/android directory.

Then, I added this to config.xml (I have other things inside this block too, but this is the relevant stuff:

<platform name="android">
    <!-- Depend on v21 of appcompat-v7 support library -->
    <framework src="com.android.support:appcompat-v7:21+" />
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" />
    </edit-config>
    <resource-file src="res/icons/android/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
    <resource-file src="res/icons/android/drawable-v24/ic_launcher_foreground.xml" target="app/src/main/res/drawable-v24/ic_launcher_foreground.xml" />
    <resource-file src="res/icons/android/mipmap-anydpi-v26/ic_launcher_round.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml" />
    <resource-file src="res/icons/android/mipmap-anydpi-v26/ic_launcher.xml" target="app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml" />
    <resource-file src="res/icons/android/mipmap-hdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png" />
    <resource-file src="res/icons/android/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
    <resource-file src="res/icons/android/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
    <resource-file src="res/icons/android/mipmap-mdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png" />
    <resource-file src="res/icons/android/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
    <resource-file src="res/icons/android/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
    <resource-file src="res/icons/android/mipmap-xhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png" />
    <resource-file src="res/icons/android/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
    <resource-file src="res/icons/android/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
    <resource-file src="res/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png" />
    <resource-file src="res/icons/android/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
    <resource-file src="res/icons/android/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
    <resource-file src="res/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png" />
    <resource-file src="res/icons/android/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
    <resource-file src="res/icons/android/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
 </platform>

I'm not fully sure if the appcompat line is necessary so you can try without it if you like. I did also need to remove the android platform & re-add each time I made a change, to get it to notice the change. At one point I also deleted the folder .idea/caches to clear cache. All that, and now it works!! I think it's a better solution than the accepted answer here, because you aren't mucking with the platforms folder & thus won't need to hand-copy things every time, once and done. Hope this saves someone some time!

score 0 · Answer 3 · answered Feb 23 '18 at 13:04

0

It looks like application taking first icon of ldpi from config.xml file

try adding

<icon src="www/res/android/ldpi.png" />

without density, outside of platform tag in config file and size of 1024x1024 so it will use full space of an app icon.

answered Feb 23 '18 at 13:04

Kirankumar Dafda

2,354
5
29
56

agiopnl · Answer 4 · 2022-07-16T20:33:49.050

0

I get this white border in Android 10, but on my older Android phone the icon looks perfect.

I guess this is just Android/Samsungs way of prefering native apps over Web-View?

edited Jul 16 '22 at 20:33

answered Mar 27 '22 at 17:35

agiopnl

1,190
9
18

app icon has white circle around it for android on phonegap/cordova

4 Answers4