Search code examples
androidionic-frameworkionic6

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


Solution

  • 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