Error occurred while copying resources/android/icon/mdpi-foreground.png

Question

I am getting following error while copying icons and splash screen using cordova-res.

I am using capacitor to build the app

I am using following command to copy the icons:

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

here is the response of the command:

~/Public/accountech-ecommerce/ionic-files$ cordova-res android --skip-config --copy
Generated 18 resources for Android
WARN:   Error occurred while copying resources/android/icon/mdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/mdpi-background.png
WARN:   Error occurred while copying resources/android/icon/hdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/hdpi-background.png
WARN:   Error occurred while copying resources/android/icon/xhdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/xhdpi-background.png
WARN:   Error occurred while copying resources/android/icon/xxhdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/xxhdpi-background.png
WARN:   Error occurred while copying resources/android/icon/xxxhdpi-foreground.png
WARN:   Error occurred while copying resources/android/icon/xxxhdpi-background.png
Copied 31 resource items to Android

PS: I have followed this instruction to do that: https://capacitorjs.com/docs/guides/splash-screens-and-icons

Answer 1

I ran into the same error in a new Ionic [email protected] project. I had the splash.png and icon.png in the resources directory. But those aren't enough. The error is related to the Adaptive Icons section for cordova-res. 2 more icons are missing in your resources directory.

1. Add the required icon-foreground.png and icon-background.png to the resources/android directory
2. (Optional) Check if cordova-res is the latest. For me I upgraded to version 0.15.3 on a mac with this commands: sudo npm -g remove cordova-res and then sudo npm -g install cordova-res --unsafe-perm
3. Re-run the command:

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

• Successful output now looks like (the 18 changed to 24):

Generated 24 resources for Android
Copied 31 resource items to Android

Answer 2

The following steps worked for me.

you will need to create two images manually.

Step 1

Create a 432x432 .png file. Then save it as "icon-background.png". you may decide to make the color transparent or not

In my case, I created a white image since I need a white background for my icon and I went for the 432x432 dimension.

Step 2

Create another 432x432 .png file and save it as "icon-foreground.png".

In this case, you will be mindful of the color of the background you use in the first image.

Step 3

put the two images created above into <Project Directory>/resources/android/

Step 4

then run either of the following from the project directory, depending on whichever works for you. number 1 worked for me.

1. cd android && gradlew assembleDebug && cd ..
2. ionic cordova run android

Answer 3

The files should be organized like this:

resources/
├── android/
│   ├── icon-background.png
│   └── icon-foreground.png
├── icon.png
└── splash.png

Next, run this command to generate all images then copy them into the native projects:

 cordova-res ios --skip-config --copy
 cordova-res android --skip-config --copy

Answer 4

I followed the instructions on this video. https://www.youtube.com/watch?v=2Ce09by4qFE

You basically have to go in to Android Studio and create a new image resource/whatever it's called.

It all used to work with a CLI command. Not anymore... (at least for me)