Cordova - Adaptive icons on Android

Below is a tested and working solution for my project that is in production.

Copy all the generated icons to res/android at the root of your project (Same level as resources or platforms folders) and add the below configuration to config.xml file:

<widget xmlns:android="http://schemas.android.com/apk/res/android">
    <platform name="android">
        <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/android/drawable/ic_launcher_background.xml" target="app/src/main/res/drawable/ic_launcher_background.xml" />
        <resource-file src="res/android/mipmap-hdpi/ic_launcher.png" target="app/src/main/res/mipmap-hdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-hdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-hdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-mdpi/ic_launcher.png" target="app/src/main/res/mipmap-mdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-mdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-mdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xhdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png" />
        <resource-file src="res/android/mipmap-xxxhdpi/ic_launcher.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher.png" />
        <resource-file src="res/android/mipmap-xxxhdpi/ic_launcher_round.png" target="app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png" />
    </platform>    
</widget>

Don't forget to add xmlns:android="http://schemas.android.com/apk/res/android" to your <widget>.

Remove <icon> if you have one as <widget> => <platform => <icon>.

After adding above changes to your config.xml, remove your Android platform with ionic cordova platform remove android or sudo ionic cordova platform remove android (depending upon your environment settings) and then add Android platform again with ionic cordova platform add android or sudo ionic cordova platform add android.

Create build, install and check the results.

I used above configurations in my production code and here are the results:

enter image description here


This SO post is the top hit when you Google for "Cordova Android adaptive icons". The methods suggested here, particularly @VicJordan's answer are a complete solution. However, it should be noted that version 8 of Cordova Android introduced its own way of supporting adaptive icons that do not require you to use Android Asset Studio.

Here is what you need to do

  • Remove the old style <icon density="?dpi" src = "path/to/icon/resource"/> statements in the config.xml file for your Cordova app
  • Provide a <icon density = "?dpi" background = "path/to/icon/background"/> directive
  • Provide a matching <icon density = "?dpi" background="path/to/icon/foreground"/> directive

where ? = l|m|h|x|xx|xxx

You can also use color blackgrounds rather than images. For full details on all of this refer to the Cordova 8 documentation.