How to build to use new desktop icon?

Ionic Framework
1

Why does getting a custom icon and custom splash screen image have to be so difficult? :frowning:

I’ve followed every tutorial/instructions on the ionic site and elsewhere to get a custom desktop icon on my android phone for my app, but nothing seems to work.
Here is what I’ve done:

I created an icon.png, size 512x512 and put it the resources/ directory.
I installed cordova-res (which was not easy since this is a capacitor project – why is there no capacitor-res command?). I had to do this to get it installed:

sudo npm install -g cordova-res --unsafe-perm

I run cordova-res and I see the new icons in the resources/android/icons directory. (I also tried cordova-res android --skip-config --copy)

I didn’t mess with the splash screen stuff yet because I thought I’d get the first thing working first.

I run my build (ionic build --prod --release && npx cap sync && npx cap open android)
(do I need to use npx cap copy perhaps?)

My app builds in Android Studio and I install it on my connected phone.

And, the icon is still the same old ionic icon…

There are a bunch of tutorials out there and none of them seem to agree. It sure would be great if the ionic folks made one thorough and maintained page which describes exactly what to do, and how to figure out what is wrong when it doesn’t work.

Can anyone help me? What am I doing wrong?

Thanks.

1 Like
2

I am still stuck on this problem (school year is over, so I’m back to try to get this to work)…

In my resources/android/icon directory, I have:

$ file *
drawable-hdpi-icon.png:    PNG image data, 72 x 72, 8-bit/color RGBA, non-interlaced
drawable-ldpi-icon.png:    PNG image data, 36 x 36, 8-bit/color RGBA, non-interlaced
drawable-mdpi-icon.png:    PNG image data, 48 x 48, 8-bit/color RGBA, non-interlaced
drawable-xhdpi-icon.png:   PNG image data, 96 x 96, 8-bit/color RGBA, non-interlaced
drawable-xxhdpi-icon.png:  PNG image data, 144 x 144, 8-bit/color RGBA, non-interlaced
drawable-xxxhdpi-icon.png: PNG image data, 192 x 192, 8-bit/color RGBA, non-interlaced

When I inspect these files, they are my new icons, in various sizes.

I do ionic build --prod --release && npx cap sync && npx cap copy android && npx cap open android

and then look in my android/app/src/main/res/mipmap-* directories where in each I see ic_launcher_{round,foreground,}.png files, but they are the default ionic images, not my images.

And, when I install the app on my android phone, the desktop icon is the ionic images, not my new images. I must be missing some step…

Help, please!

3

I face the same prob.
Although, my custom splash screen icon is working at least.
I run local dev session on my phone with this command ionic cap run android --livereload --external (after upgrading ionic\cli and capacitor to latest).
To fix the icon issue I can only recommend a work-around: copy resources/android/icon folder into android/app/src/main/res. Although, it’s rather tedious to do it manually, since you have to put individual files into individual folders :man_facepalming:.

4

Thanks to @avalanche1 , I figured it out. I have to copy the icon.png into android/icon-foreground.png first, then also copy the resulting files into the mipmap directories. Wow! What a hassle.

cordova-res android --copy --skip-config
cp resources/icon.png resources/android/icon-foreground.png
cp resources/android/icon/hdpi-foreground.png android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
cp resources/android/icon/xxxhdpi-foreground.png android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
cp resources/android/icon/xxhdpi-foreground.png android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
cp resources/android/icon/xhdpi-foreground.png android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
cp resources/android/icon/mdpi-foreground.png android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
cp resources/android/icon/hdpi-foreground.png android/app/src/main/res/mipmap-hdpi/ic_launcher.png
cp resources/android/icon/xxxhdpi-foreground.png android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
cp resources/android/icon/xxhdpi-foreground.png android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
cp resources/android/icon/xhdpi-foreground.png android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
cp resources/android/icon/mdpi-foreground.png android/app/src/main/res/mipmap-mdpi/ic_launcher.png
1 Like