Generate App Icon and Splash Screen for Ionic Capacitor Android/iOS

 In this tutorial we going to learn how we can generate app icon and splash screen using capacitor assets.

App Icon:- App icon is visual identity of app. This is unique image used to represent an app on a user's device. It is also appear everywhere like user setting, play store and app stores.

Splash Screen:- A splash screen is introduction page/screen of app. This is appear when app is launching.

First install cordova-res plugin using below mention command

npm install -g cordova-res

This tool will help you to generate to app icon and splash screen for all modern iOS and android devices. This plugin especially developed for Cordova but Capacitor and other native runtimes are supported.

 Now time for use this plugin to generate icon and splash screen. You need to place a icon and splash screen file in png format in below mention location in your project directory.

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

• icon must be at least 1024*1024px
• splash must be at least 2732*2732px 

Now time to generate icon for your app, but before running that make sure you have created your native project for which you want to create icon and splash screen.

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

--skip-config will use to skip the process of reading and writing icon and splash screen references in config.xml. which is basically used in Cordova. --copy command will copies all the resources in native project.

Note:- Capacitor Assets isn't quite ready for use. For now, continue to use cordova-res as shown above. Capacitor team will update once the new version of this tool is ready. Then I will create separate tutorial for that. 

I hope you enjoy this tutorial, Keep learning.

Thanks!