CODEWITHSUNDEEP
androidionic-frameworkionic6
AmirHossein
AmirHossein

Reputation: 492

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 ? Thanks

Upvotes: 9

Views: 14081

Answers (2)

Aterxerxes
Aterxerxes

Reputation: 554

Found the solution.

I went to the official docs page found in Callan's answer: https://capacitorjs.com/docs/guides/splash-screens-and-icons

I found that when I clicked on the "cordova-res" link found on that page, it instead redirects me to the capacitor-assets page: https://github.com/ionic-team/capacitor-assets

After following the steps on the capacitor-assets page, my icon was appropriately added to the project.

And after a sync and build (ionic cap sync android && ionic cap open android), the new icon was showing up after I built the APK and installed it on a physical phone.

The splash screen process is also documented on the capacitor-assets page.

Upvotes: 4

Callan
Callan

Reputation: 1233

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: https://capacitorjs.com/docs/guides/splash-screens-and-icons

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:

resources/
├── 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

Upvotes: 7

Related Questions