How to change icon and splash screen in ionic 6


I am currently using the latest version of Ionic( Ionic 6 ). After finishing the program in Ionic, I noticed a problem. The app icon and splash screen are capacitor defaults. How to change them in Ionic 6.
According to Capacitor Docs, I should use Cordova-res , but I read else where that I should use Capacitor/splash-screen package. which one is better ? Also in both of them I need ‘resource’ folder which is not in my Ionic project root directory by default. Do I have to create it myself and put images in that ?


Yes you have to create the folder yourself and add the 2 images (icon.png, splash.png). Cordova-res works just fine, no need to worry about it.

Also for Android you might need to add something like icon-foreground.png and icon-background.png

Follow this steps:

First, install cordova-res:

npm install -g cordova-res

cordova-res expects a Cordova-like structure: place one icon and one splash screen file in a top-level resources folder within your project, like so:

├── icon.png
└── splash.png

Next, run the following to generate all images then copy them into the native projects:

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

Answered By – Callan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published