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
Asked
Active
Viewed 1.0k times
2 Answers
7
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
Callan
- 1,179
- 1
- 7
- 18
-
this is not working for me – Satyajit Behera Nov 26 '22 at 12:33
-
Clear and invalidate cache on Android studio? – Callan Nov 27 '22 at 13:12
-
Yes , it worked for ionic 5 project . But it seems that ionic changed the way and based on capacitor docs , we should now use capacitor-assets tool – AmirHossein May 27 '23 at 21:19
4
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.
Aterxerxes
- 554
- 4
- 13
-
It works following the instructions of https://github.com/ionic-team/capacitor-assets with capacitor: 1. put in ressources icon.png and splash.png, 2. run: npm install --save-dev @capacitor/assets. Follows the links for a complete guide. – m50 Apr 18 '23 at 21:16