Icon and Splash Screen Image Generation
Automatically generate icons and splash screens from source images to create each size needed for each platform, in addition to copying each resized and cropped image into each platform’s resources directory. Source images can either be a
psd Photoshop or
ai Illustrator file. Images are generated using Ionic’s image resizing and cropping server, instead of requiring special libraries and plugins to be installed locally.
Since each platform has different image requirements, it’s best to make a source image for the largest size needed, and let the CLI do all the resizing, cropping and copying for you. Newly generated images will be placed in the
resources directory at the root of the Cordova project. Additionally, the CLI will update and add the correct
<platform> configs to the project’s config.xml file.
During the build process, Cordova (v3.6 or later) will look through the project’s config.xml file and copy the newly created resource images to the platform’s specific resource folder. For example, Android’s resource folder can be found in
platforms/android/res, and iOS uses
Icon Source Image
icon.ai file within the
resources directory at the root of the Cordova project. The icon image’s minimum dimensions should be 192x192 px, and should have no rounded corners. Note that each platform will apply it’s own mask and effects to the icons. For example, iOS will automatically apply it’s custom rounded corners, so the source file should not already come with rounded corners. This Photoshop icon template provides the recommended size and guidelines of the artwork’s safe zone.
$ ionic resources --icon
Splash Screen Source Image
splash.ai file within the
resources directory at the root of the Cordova project. Splash screen dimensions vary for each platform, device and orientation, so a square source image is required the generate each of various sizes. The source image’s minimum dimensions should be 2208x2208 px, and its artwork should be centered within the square, knowing that each generated image will be center cropped into landscape and portrait images. The splash screen’s artwork should roughly fit within a center square (1200x1200 px). This Photoshop splash screen template provides the recommended size and guidelines of the artwork’s safe zone. Additionally, when the
Orientation preference config is set to either
portrait mode, then only the necessary images will be generated.
$ ionic resources --splash
Generating Icons and Splash Screens
To generate both icons and splash screens, follow the instructions above and run:
$ ionic resources
Platform Specific Resource Images
One source image can be used to generate images for each platform by placing the file within the
resources directory, such as
resources/icon.png. To use different source images for individual platforms, place the source image in the respective platform’s directory. For example, to use a different icon for Android, it should follow this path:
resources/android/icon.png, and a different image for iOS would use this path: