Search code examples
cordovagradleionic4capacitor

Image of the Ionic app icon displayed cropped after generating the apk

[ Contextualizing the problem ]

I have an Ionic PWA project in production.
I need to generate Android apps using the same project and I am using capacitor to generate apps and resources.
Apk files were created correctly, but the application icon was not. When using the default app icon (capacitor icon) it works, when using the custom icon, the image is cut.

Original (512x512)
enter image description here

Icon was like this
icon_like_this


[ Scripts ]

Below are the steps to generate.
The configuration is ok, at first. All scripts run without alerts.

Generate resources

> cordova-res android --skip-config --copy

All resources are created and in the correct sizes for each dimension. enter image description here

Generate APKs

> ng build --prod && ionic cap copy android && cd android && gradlew assemble && cd ..

enter image description here


[ Configuration ]

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\rpizao\AppData\Roaming\nvm\v12.16.1\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.3.4
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.2

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.1.0
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   Android SDK Tools : 25.2.3 (D:\apps\Android)
   NodeJS            : v12.16.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10
Solution

  • The dimensions created are the same in both solutions, but using cordova-res my icons are generated without correct border for icon round.
    Using a web solution like https://easyappicon.com works.