41

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

Hello World
  • 2,673
  • 7
  • 28
  • 60

7 Answers7

92

I ran into the same error in a new Ionic Capacitor@2.4.7 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
site
  • 1,608
  • 14
  • 11
  • 4
    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. – migli Aug 26 '21 at 16:20
  • Any idea on what are the required dimensions of these images? – BorisD Jan 22 '23 at 09:36
  • You may have to remove your android and resources/android directories. Then `npx cap add android`. Then `cordova-res android --skip-config --copy`. – stephen Feb 20 '23 at 15:18
35

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
Siddhartha Mukherjee
  • 2,703
  • 2
  • 24
  • 29
16

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
Akinsam
  • 428
  • 4
  • 11
  • what do you mean with "you will be mindful of the color of the background you use in the first image" ?? – Carlos.V Apr 30 '21 at 21:17
  • 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 – Akinsam Jun 03 '21 at 11:30
1

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)

vr_driver
  • 1,867
  • 28
  • 39
0

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

Chintan Vasoya
  • 160
  • 4
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/29773956) – gtxtreme Sep 09 '21 at 08:17
  • That will not replace the splash screen. – Herii Sep 12 '21 at 05:15
  • 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 – Chintan Vasoya Sep 12 '21 at 17:18
0

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
dcalta
  • 1
-4

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

ionic cordova resources

Suvam Gayen
  • 23
  • 3
  • 1
    Since I am using `capacitorjs`, getting this error: `[ERROR] Could not find cordova integration in the default project.` – Hello World Feb 04 '21 at 10:19