Note: Updated July 13th, 2019 based on Ionic CLI version 5.0.0+

What’s the first thing users see when they download your app? What about after they install it and start the app?

An app icon and splash screen (launch image) are important parts of any app, yet making them used to be incredibly tedious. You needed numerous icons for iOS and Android, and then you had to deal with splash screens and all their different sizes. To save you the stress of dealing with all that, we’ve made it possible for you to generate app icons and splash screens via the Ionic CLI.

Generate those Resources

With the new CLI, all you need is a resource directory and two images. These images must be .png files named icon.png and splash.png. With the images in a resources directory, ./resources, the ionic cordova resources command will generate the icons and splash screen images locally for each platform setup in the project by using the cordova-res tool.

$ npm install -g cordova-res
$ ionic cordova resources

After the images are generated, the CLI will update the config.xml to include the icons and splash screens, so they will be transferred over in Cordova’s build process. NOTE: This process requires Cordova CLI version 3.6 or higher.

If you only need to update one of the resources, or you only want to generate icons and not both, the ionic cordova resources command has two flags that allow you to target each asset, instead of generating both.

$ ionic cordova resources --icon
$ ionic cordova resources --splash

Image Sizes

In order to be able to crop and resize images to fit the various needs of each platform, icons and splash screen images should meet a minimum size requirement.

The icon image’s minimum dimensions should be 1024×1024 pixels and should have no rounded corners. Note that each platform will apply its own mask and effects to the icons. For example, iOS will automatically apply its custom rounded corners, so the source file should not already come with rounded corners.

Splash screen dimensions vary for each platform, device, and orientation, so a square source image is required to generate each of the various screen sizes. The source image’s minimum dimensions should be 2732×2732 pixels, and the artwork should be centered within the square, because each generated image will be center cropped into landscape and portrait images.

The splash screen’s artwork should roughly fit within a center square (1200×1200 pixels). This template provides the recommended size and guidelines about the artwork’s safe zone.

Platform Specifics

Want different icons for the iOS and Android versions of your app? No problem; we’ve got that covered, too. To use different source images for individual platforms, place the source image in the respective platform’s directory. To use a different icon for Android, the image should follow this path: resources/android/icon.png, and the image for iOS should use this path: resources/ios/icon.png. This way, you can have an iOS icon with native rounded corners and an Android icon with a transparent background.

This is just one more way Ionic aims to make developers’ lives easier, not to mention more fun. Update your CLI and install cordova-res, then try out the resource generator today.

$ npm install -g ionic cordova-res

What’s Next

As we mentioned in our Beta 14 blog post, we’ve been working on adding Crosswalk integration for Android into our CLI. Josh has been hard at work on this, and it will be landing in the CLI as a beta feature soon. Keep an eye on the CLI!

Sign up for the Ionic Newsletter to get the latest news and updates!


  • jurjenfolkertsma says:

    my ionic file structure doesnt show one res folder, it shows every size icon with its own res folder

  • Gavin Klose says:

    It would be great to have a large Landscape Splashscreen and a large Portrait Splashscreen that can be resized down so the design can be tweaked based on the orientation – rather than only having a small common square area to fit everything in the single large Square Splashscreen. Is there a easy code solution for that?

  • Paolo Alberti says:

    It’s amazing, the ionic group is amazing, many thanks for your great job.

  • You guys are awesome. Making work easy over and over again

  • Sean Hill says:

    I just recently tried this, but iPhone 6 resolution didn’t work because 1200×1200 was to small. What would be a good dimension now?

  • Ulrich Peinhardt says:

    when using the native ionic splash screen and fullscreen=true in config.xml the image-aspect ratio is broken, any ideas on that? (1.0.0-rc5)

  • Alan Gruskoff says:

    Great freakin feature. Make my day by generating ALL my requisite images. Yeah, Honey!

  • محمد محمدی says:

    i’m fucked up for downloading new ionic 😐

  • KATH2758 says:

    Thanks Mike, It’s amazing

  • marlonhelder says:

    The more I learn about Ionic features, the more I love it!

  • Andre Woodley Jr says:

    Thank you for creating this!!!

  • Sagar Ayi says:

    Thanks a ton for making this task easier.

  • buddaboy says:

    I can’t find any info about the maximum file size that the source splash.psd can be anywhere. Ionic CLI rejects mine:

    $ ionic resources –splash
    Ionic splash screen resources generator
    uploading splash.psd…
    ✗ Invalid upload: image too large: 23022957

  • Paco says:

    I think “Cordova Icons and Splash Screens Docs” link is broken

  • Crazy says:

    Perfect tool, thanks 🙂 If you use Meteor, here some tips. Generate them on a fresh Ionic project, copy them to your project and configure your mobile-config.js like this :
    App.icons({ 'iphone': 'resources/ios/icon/icon-60.png', 'iphone_2x': 'resources/ios/icon/icon-60@2x.png', 'iphone_3x': 'resources/ios/icon/icon-60@3x.png', 'ipad': 'resources/ios/icon/icon-76.png', 'ipad_2x': 'resources/ios/icon/icon-76@2x.png', 'android_ldpi': 'resources/android/icon/drawable-ldpi-icon.png', 'android_mdpi': 'resources/android/icon/drawable-mdpi-icon.png', 'android_hdpi': 'resources/android/icon/drawable-hdpi-icon.png', 'android_xhdpi': 'resources/android/icon/drawable-xhdpi-icon.png' // 'android_xxhdpi': 'resources/android/icon/drawable-xxhdpi-icon.png', // 'android_xxxhdpi': 'resources/android/icon/drawable-xxxhdpi-icon.png' }); App.launchScreens({ 'iphone': 'resources/ios/splash/Default~iphone.png', 'iphone_2x': 'resources/ios/splash/Default@2x~iphone.png', 'iphone5': 'resources/ios/splash/Default-568h@2x~iphone.png', 'iphone6': 'resources/ios/splash/Default-667h.png', 'iphone6p_portrait': 'resources/ios/splash/Default-736h.png', 'ipad_portrait': 'resources/ios/splash/Default-Portrait~ipad.png', 'ipad_portrait_2x': 'resources/ios/splash/Default-Portrait@2x~ipad.png', 'ipad_landscape': 'resources/ios/splash/Default-Landscape~ipad.png', 'ipad_landscape_2x': 'resources/ios/splash/Default-Landscape@2x~ipad.png', 'android_ldpi_portrait': 'resources/android/splash/drawable-port-ldpi-screen.png', 'android_ldpi_landscape': 'resources/android/splash/drawable-land-ldpi-screen.png', 'android_mdpi_portrait': 'resources/android/splash/drawable-port-mdpi-screen.png', 'android_mdpi_landscape': 'resources/android/splash/drawable-land-mdpi-screen.png', 'android_hdpi_portrait': 'resources/android/splash/drawable-port-hdpi-screen.png', 'android_hdpi_landscape': 'resources/android/splash/drawable-land-hdpi-screen.png', 'android_xhdpi_portrait': 'resources/android/splash/drawable-port-xhdpi-screen.png', 'android_xhdpi_landscape': 'resources/android/splash/drawable-land-xhdpi-screen.png' });

  • georgebirbilis says:

    The link “Cordova Icons and Splash Screens Docs” is broken

  • aflorescu says:

    Any thoughts on android 6.0? Now it requires us to use the transparent image that will create some kind of mask.

  • Amr says:

    Hi, I had created the icon and the splash screen with the required names and dimensions, when running ionic resources I get nothing. The command ends quietly

  • emini says:

    This is amazing 🙂 Thank you guys!

  • napcat says:

    Very useful tool, but it’s not supporting the windows platform. The windows platform is ignored and no assets are created…

  • Rayner Lemos says:

    I’m having a problem with the Splash Screen.
    My application starts normally, but when the Splash closes, appears for a few seconds (0.5s – 2s) a totally white screen. Only after those seconds that the project back to work normally.
    This screen is quite disturbing usability of my App.
    Does anyone have the same problem or know what to do?

  • Kaos says:

    it is definitely cool for me to saving time. 🙂

  • Maciej Lew says:

    Note that generated png icons and splash screens are not optimized. You can decrease file size 10-20% using tools like optipng.

  • Adil shaikh says:

    thanks for the post, any heads up If I want to use multiple sized images for multiple sized devices. (except for splash and icons)

  • Santi Calvo says:

    This would be nice if only it worked. I guess it only works the first time you do it.
    It simply doesn’t work if you want to do twice the process. I made a mistake with the icon and ever since I get empty folders when I run the comand.
    There’s some nasty server side control that creates some kind of horrible cache and breaks the whole functionality. If you make a mistake the first time you run the command it breaks. I tried to modify the checksum of the images and didn’t work.

  • Zeal Murapa says:

    The command runs but creates nothing, same images in the folders

    • Paulo victor Campelo Selano says:

      did u found a solution for this? i’ve met the same issue

    • Edgard Morales says:

      I’m in the same situation… and haven’t found a solution

    • Edward van Helgen says:

      I had the same issue. Turns out i had to enter the ‘ionic resources’ command directly from the /resource directory itself. Worked like a charm. Hope it helps!

    • Vijay Sasvadia says:

      Please update ionic and cordova and then run this command it will work.
      i had same issue. it solved by updating the ionic and cordoava.
      i hope it works and helps you

  • Santi Calvo says:

    I am sorry to say this doesn’t work at all.

    Is the server side code available to install it locally and patch it? Currently this fails, it keeps creating empty folders.

    Anyway, does anyone know any script or application (mac or linux) to do it locally?
    Thank you.

  • Jason Jong says:

    Same, but no new files generated. My PNG is 2Mb and I cant compress it anymore

    Ionic splash screen resources generator
    splash ios Default-568h@2x~iphone.png (640×1136) from cache
    splash ios Default-667h.png (750×1334) from cache
    splash ios Default-736h.png (1242×2208) from cache
    splash ios Default-Portrait@2x~ipad.png (1536×2048) from cache
    splash ios Default-Portrait~ipad.png (768×1024) from cache
    splash ios Default@2x~iphone.png (640×960) from cache
    splash ios Default~iphone.png (320×480) from cache
    splash android drawable-port-ldpi-screen.png (240×320) from cache
    splash android drawable-port-mdpi-screen.png (320×480) from cache
    splash android drawable-port-hdpi-screen.png (480×800) from cache
    splash android drawable-port-xhdpi-screen.png (720×1280) from cache
    splash android drawable-port-xxhdpi-screen.png (960×1600) from cache
    splash android drawable-port-xxxhdpi-screen.png (1280×1920) from cache
    uploading splash.png…
    splash.png (2732×2732) upload complete
    generating splash ios Default-Portrait@~ipadpro.png (2048×2732)…

  • Angela M Luna A says:

    Before automatically create the icon and splash
    Is it possible to customize the icon and splash, so it would be different from the default? or is it possible to change the default size?

  • Angela M Luna A says:

    Before automatically create the icon and splash
    Is it possible to customize the icon and splash, so it would be different from the default? or is it possible to change the default size?

  • pharouk90 says:

    So sad for me, I found this after spending 2 days on photoshop creating icons and splash screen for my App. Anyway it’s very cool. Thanks to team I will be using it on my next project.

  • Junior says:

    Perfect post! Ty Mike.

  • Azeez Adigun says:

    Minimum icon and splash resolutions @ 192x192pixels and 2208x2208pixels respectively worked for me

  • Brad says:

    this service is down…..

    Unable to generate images due to an error Image server temporarily unavailable: (Followed but a inline styled web page source)

  • Ananthakrishnan says:

    Is it only for app Icon and splash screen or else we can add other icons and images also which is used inside the project?

  • shweta chitnis says:

    How to hide system bottom navigation and status bar from splash screen?

  • meetdilip says:

    Only .psd and .ai ? Would be great to have .svg and .xcf support as well. Inkscape and GIMP.

  • Jagat Bandhu Sahoo says:

    Generating platform resources, taking too much time and not generating properly

  • Kwizera Innocent says:

    hey thanks for the post, is there a way to automate the introductory images on the tutorial pages for an app

  • Suraj Sharma says:

    The new CLI commands :
    ionic cordova resources

  • KarthiK E says:

    Dear All,
    I have generated splash screen using ionic cordova resources. The splash screen has logo at the top and bottom part of it. The logo is getting cropped in most of the devices while launching the app. does anyone face similar kind of issue?

    cropped header and footer images in splash screens, please advise for same, if we tried manually add the splash screen for each device than app size increased and some of the app is not fit on this solution. please help us

29 Trackbacks