Ionic 5 - How to replace default icon and splash screen image and generate resources

Question

I recently started using ionic 6 and capacitor(not cordova), and I don\'t know how to replace its default application icon and splash screen. Is there any way to do it and gene

Answer 1

cordova-res now supports Capacitor. You just need to install cordova-res globally (or use npx) and run it to generate and copy to the appropriate native projects. You can read the docs on GitHub: https://github.com/ionic-team/cordova-res#capacitor, but basically you only need to run these commands and it will use the /resources folders icon.png and splash.png for generation as expected:

npm install -g cordova-res
// From within your Ionic project:
cordova-res --skip-config --copy // Android, iOS, and Windows

I tend to stick that last line in package.json scripts so I don't have to keep looking it up when updates occur by running npm run resources.

File: package.json

"scripts": {
  // ...
  "resources": "cordova-res --skip-config --copy"
},

If you don't want to install a global package you can use npx, and to avoid see the warning about how cordova-res not handling exporting to the Windows platform you can isolate the export to iOS and Android:

Alternative: package.json

"scripts": {
  // ...
    "resources": "npx cordova-res ios --skip-config --copy && npx cordova-res android --skip-config --copy"
}

If you need the PSD to generate your splash screen it can be found by scanning the Ionic Docs for the CLI https://ionicframework.com/docs/cli/commands/cordova-resources, or downloaded directly from https://code.ionicframework.com/resources/splash.psd.