How to set icon in Cordova?

Question

I know this question gets asked a lot, and I'm still having trouble getting the icons to show in my app on ios and android after upgrading my platforms.

cordova --version | 9.0.0 (cordova-lib@9.0.1) cordova platforms | android 8.1.0 ios 5.0.1

Following this https://cordova.apache.org/docs/en/latest/config_ref/images.html my first attempt was to add: <icon src="res/icon.png" /> After building the app I see the images Images.xcassets/AppIcon.appiconset. But the images do not take in the app.

Next I generated all the necessary icon sizes and loaded them in res/icon/android and res/icon/ios and then added the following the icon references to the config.xml from the guide above.

Run cordova build ios and then I see the images Images.xcassets/AppIcon.appiconset folder. However still my icon is not set when I run the app in the simulator.

When I run cordova build android I get a build error: AAPT: error: resource mipmap/ic_launcher (aka com.project.mine:mipmap/ic_launcher) not found.

Any ideas?

Edit: If I got into Xcode General -> App Icon Source and click the arrow to access App Icon. I see the option to manually drag all my icons to the right spot. I see all my icons have a warning: "The app icon set "AppIcon" has 22 unassigned children". It looks like I can resize my images manually and drag them correctly.

I'm wondering if there is a automatic way to do this?

Answer 1

Next I generated all the necessary icon sizes and loaded them in res/icon/android and res/icon/ios and then added the following the icon references to the config.xml from the guide above.

Did you do that by hand? 😱

There's a package that does it all for you.

npm install -g cordova-res
cordova-res

You need the following file structure:

resources/
├── icon.png
└── splash.png
config.xml

Also: in Android, the icon is cached sometimes. You have to either restart your launcher or the phone. (maybe cleaning the app cache works too)