How to change icon and splash screen images

Last Updated On March 26, 2021
You are here:

App Icon:

Examples of App icons in iOS and Android. They are automatically created, it is just needed 1 squared image.

Requirements:

  • Image of at least 1024×1024 px (mandatory a squared image)
  • Must be a png file
  • No transparency effect allowed
  • Insert it in the folder: resources/icon.png
  • Cannot be changed after the publishing of the app (to change it requires a new publishing)

Splash Screen:

Examples of app splash screens. Please, if you want to use a logo, E.g. PayPal or Skype one, put it in the center of the squared image. The Splah screen image is the image shown when the app is opened while the content is loading.

Requirements:

  • Image of at least 2732×2732 px (mandatory a squared image)
  • Must be a png file
  • No transparency effect allowed
  • Insert it in the folder: resources/splash.png
  • Cannot be changed after the publishing of the app (to change it requires a new publishing)

Important: Apple automatically refuse icon with transparent effect

For example, for our demo app we used the following images:

App icon image of 1024×1024 px


Splash screen image of 2732×2732 px. The image is bigger but the logo is in the center with black spaces in the edges to be able to well fit in the device screen


How to automatically generate all the icons sizes

After inserted the icon image and splash screen image in the right folders, you can use the following command to generate all the required sizes (to support all the devices sizes) starting from those 2 images:

 ionic cordova resources

This command will generate all the versions needed fo your images, no need to delete the previous images.

For help:

ionic cordova resources --help

Full size app icon

In some android versions if the app icon is not a circle it is shown as the second one in the image, with a white background. If you want a full with for each android versions you can use a circle png image of at least 1024×1024 with transparent background.

2 thoughts on “How to change icon and splash screen images

    1. Is specified “insert it in the folder: resources/icon.png”, for example for the icon.png.
      By the way you can also follow the video tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *