Skip to main content

How To Add Icons And Splash Screen For Ionic Framework Apps

In this post I will explain how to add icons and splash screen to your Ionic framework app for android but if you are building for iOS you can follow as well as there is not a lot off difference between Android and iOS when it comes to Splash-Screens.

I have already have two other post showing you

  1. How u can add splashscreens for phongap CLI and also
  2. How u can add splashscreens for phongap Build serivce

Watch Video Tutorial Here:

 

Step 1)

First we will need to create two images one for the icon and another for the splash screen. The name of the images have to be icon.png and splash.png the naming is important here so make sure you name the images as stated, the size of the icon images should be 1024×1024 and the size of the splash screen image should be 2208×2208.

 

Step 2)

We now need to place the images inside the resources folder of our app. You will all have two images my the same name there so you need to copy and replace them.

Inside the resources folder there will be two folders namely and Android and iOS these will have sub-folders and images in them you do not have to worry about them.

 

Step 3)

Ionic by default installs the cordova splash screen plugin. So check the plugins folder and if you see a folder inside by the name “cordova-plugin-splashscreen” that means you have the splash screen plugin already installed, so you do not need to install it.

But for some reason you do not have the plugin install then navigate to the root of the app and run the following command

This will add the splash screen plugin.

 

Step 4)

Now we will run the ionic resources command at the root of out app, this command will send the two images that we copies inside the resources folder to a remote server and will in return get icons and splash screen for all different screen sizes. You need to be connected to the internet for

So run the following command after navigating to the root of your app with the command prompt

All the images for iOS and Android for different screen sizes and orientations will be automatically copied to the respective folders inside the resources folder.

 

Step 5)

We are now ready to test our app so to install and run it on a connected device issue the following command

 

And that’s it just like that we have splash screens for all screen sizes for iOS and Android. Notice that ionic did all the heavy lifting of re-sizing the images we just had to create two images.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper
Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)