Ionic 3 – How to add your own custom icon and splash screen

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.

Screen Shot 2017-06-27 at 10.47.53 AM.png

This image will be rescaled and resized so ensure that you leave some extra space that can be cut off from the screen.

Screen Shot 2017-06-27 at 10.48.49 AM.png

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.

Screen Shot 2017-06-27 at 10.51.24 AM.png

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s