When submitting applications to the app stores we need to supply an icon for the application that is used to display the application on the user’s home screen or applications menu, and a splash screen that is displayed when the app launches.
That doesn’t sound like too much of a task, but there are a variety of different devices out there with different splash screen and icon sizes, so we need to create a ton of assets to satisfy all of these requirements.
It’s quite the task to do this all manually yourself, but fortunately, the Ionic CLI provides a command that you can use to generate the assets automatically based on just one splash screen and icon.
In this video tutorial, I will walk you through how to create the initial icon and splash screen, and how to use the ionic resources command.
Here’s the video:
Video Notes
- You will need to create an initial 192x192px icon and a 2208x2208px splash screen
- The initial designs should be placed in the resources folder
- The edges of the splash screen design may be cropped depending on the splash screen that is being generated, so you will need to make sure that important design elements are near to the center of the splash screen
- Run
ionic resourcesto generate the splash screens and icons - You must have added the platform in order to generate assets for that platform, i.e.
ionic platform add android - You can also generate just the icons with
ionic resources -ior just the splash screens withionic resources -s