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

Toms

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

Desulphurize

It seems it doesn't work anymore, even with the latest Cordova-res. No error, no missing files, but just the same warnings and still 18 images generated. – Uncertainty

Any idea on what are the required dimensions of these images? – Passional

You may have to remove your android and resources/android directories. Then npx cap add android. Then cordova-res android --skip-config --copy. – Abott

Answer 2

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

Basque

Answer 3

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

Zins

what do you mean with "you will be mindful of the color of the background you use in the first image" ?? – Arette

it has to be a contrasting color. if the background color is white, then icon-foreground.png image should either be black or something that is visible when placed on top of white color – Zins

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)

Sidle

Answer 5

I solved by using capacitor-assets, which has an "Easy Mode". For example in my ionic-vue android project I used:

npx capacitor-assets generate --android --assetPath resources/android --androidProject android

if you don't have it installed, you can do it by typing:

npm install @capacitor/assets -g

Natoshanatron

Answer 6

Directly ADD your android application via android studio go to APP then click file > new > image asset now set your app icon manually

Mousseline

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Neptunian

That will not replace the splash screen. – Teledu

yes , but splash screen added by ionic command and after you got this error for app icon that time this is helpful .throw this you direct change your app icon. @JohnHarris – Mousseline

Answer 7

If you using ionicframework try this
ionic cordova resources [<platform>] [options]

ionic cordova resources

Land

Since I am using capacitorjs, getting this error: [ERROR] Could not find cordova integration in the default project. – Toms