Easily Generating Icon and Splash Images with Cordova Resource Generation Tool

A tool/plugin called cordova-res (https://github.com/ionic-team/cordova-res) is great to automatically generate icon and splash images if you develop an app using Capacitor.

1. First install the plugin

npm install -g cordova-res

2. Prepare the base icon and splash screen images
icon.(png|jpg) must be at least 1024×1024 px
splash.(png|jpg) must be at least 2732×2732 px
For iOS, the icon image should be squared and not masked https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/.

3. Then place the image files in resources folder. The plugin expects files structure like this:

resources/
├── icon.png
└── splash.png
config.xml (optional)

For iOS
4. Run this command

cordova-res ios --skip-config –copy

The result will be something like:
Generated 47 resources for iOS
Copied 21 resource items to iOS

5. Assign the images in Xcode
On Xcode, navigate to App > App > Assets.xcassets. Replace the icon and splash images with the newly generated images.
https://www.joshmorony.com/adding-icons-splash-screens-launch-images-to-capacitor-projects/


For Android
4. Run the command

cordova-res android --skip-config –copy

Splash and legacy icon images will be generated.

5. Generate adaptive icons
Since Android 8.0 (API level 26), adaptive icon is used as launcher icons for variety of Android devices.
Open Android Studio then select app folder.
Click File -> New -> Image Asset.
Set Foreground and Background Layers.
For adaptive icon source image, the centre area is smaller than the one for legacy icon.

6. Replace splash images (if using Capacitor framework)
The current Capacitor version replaces all the icons but not the splash screens. We need to replace all the default images under 'splash' folder ourselves.

These default images are in separated folders located inside 'app\src\main\res' folder.

We just need to replace each 'splash.png' file inside each folder with our generated splash images: