Cordova enables us to create our own splash screen (shown when the app loads) and a custom icon for our Ionic 3 application by using the CLI.
Each platform device has different screen sizes and this requires the splash screen and app icon to be available in the correct size for each platform device. More about the different platform device screen sizes can be viewed here: https://cordova.apache.org/docs/en/3.5.0/config_ref/images.html
Luckily for us, Cordova takes care of the different sizes by generating the correct file sizes needed for each platform. We only have to supply it with one splash screen image file and one icon image file the rest will be taken care of automatically.
Create the splash screen and the icon image
The splash screen
To ensure that the splash screen is big enough to scale to all platform device sizes create a 2732 x 2732 image.
This image will be rescaled and resized so ensure that you leave some extra space that can be cut off from the screen.
Save the image as splash.png and copy it into your project folder under resources
/projectname/resources/splash.png. If it asks to replace the existing splash.png file click OK.
The app icon
To ensure that the icon is big enough to scale to all platform device sizes create a 1024 x 1024 image.
Save the image as icon.png and copy it into your project folder under resources
/projectname/resources/icon.png. If it asks to replace the existing icon.png file click OK.
Configuring the splash screen and icon for all devices
With the newly created splash.png and icon.png saved in the resources directory of your project we will now use cordova to configure it for the various platforms. To do this cd into your project directory and run the following command:
$ ionic cordova resources
That’s it – Your application should now display the custom splash screen and icon without any issues.