Preparing Screenshots, Splashscreens & Icons for App Store Submission

Preparing Screenshots, Splashscreens & Icons for App Store Submission

Follow Josh Morony on

I recently wrote a post about strategies for designing a good splash screen experience for the user when using PhoneGap Build. What I didn’t explicitly cover was how exactly to prepare all the different kinds of splash screens and icons you will need when you build your application. As well as the graphics you’ll need for building your application, you’ll also need to prepare additional screenshots and icons for the app store listing. Even when you know all the requirements this is still a pretty painful process so I want to make sure you don’t have to spend hours searching around for the correct dimensions of screens you need to cater for.

Preparing for the PhoneGap Build Process

PhoneGap Build automatically handles splash screens and icons for you, but of course you still need to actually provide and reference them. You will need to include something like the following in your config.xml file:

BONUS CONTENT: Download a template pack that includes all of the necessary splash screens and icons, as well as a ready to go config.xml file.

<!-- Default Icon and Splash -->
    <icon src="icon.png" />
    <gap:splash src="splash.png" />

    <!-- Android Icons -->
    <icon src="resources/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:qualifier="ldpi" />
    <icon src="resources/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:qualifier="mdpi" />
    <icon src="resources/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:qualifier="hdpi" />
    <icon src="resources/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:qualifier="xhdpi" />
    <icon src="resources/icon/android/icon-144-xxhdpi.png" gap:platform="android"   gap:qualifier="xxhdpi" />

    <!-- iOS Icons  -->

        <!-- 7.0+ -->
        <icon src="resources/icon/ios/icon-small.png"     gap:platform="ios"        width="29" height="29" />
        <icon src="resources/icon/ios/icon-40.png"        gap:platform="ios"        width="40" height="40" />
        <icon src="resources/icon/ios/icon-small@2x.png"  gap:platform="ios"        width="58" height="58" />
        <icon src="resources/icon/ios/icon-60.png"        gap:platform="ios"        width="60" height="60" />
        <icon src="resources/icon/ios/icon-76.png"        gap:platform="ios"        width="76" height="76" />
        <icon src="resources/icon/ios/icon-40@2x.png"     gap:platform="ios"        width="80" height="80" />
        <icon src="resources/icon/ios/icon-60@2x.png"     gap:platform="ios"        width="120" height="120" />
        <icon src="resources/icon/ios/icon-76@2x.png"     gap:platform="ios"        width="152" height="152" />      

        <!-- 6.1 -->
        <icon src="resources/icon/ios/icon-50.png"        gap:platform="ios"        width="50" height="50" />
        <icon src="resources/icon/ios/icon-72.png"        gap:platform="ios"        width="72" height="72" />
        <icon src="resources/icon/ios/icon-50@2x.png"     gap:platform="ios"        width="100" height="100" />
        <icon src="resources/icon/ios/icon-57-2x.png"     gap:platform="ios"        width="114" height="114" />
        <icon src="resources/icon/ios/icon-72-2x.png"     gap:platform="ios"        width="144" height="144" />

    <!-- Android Splash Screens -->

    <!-- 200px x 320px -->
    <gap:splash src="splash/android/screen-ldpi.png"  gap:platform="android" gap:qualifier="ldpi" />

    <!-- 320px x 480px -->
    <gap:splash src="splash/android/screen-mdpi.png"  gap:platform="android" gap:qualifier="mdpi" />

    <!-- 480px x 800px -->
    <gap:splash src="splash/android/screen-hdpi.png"  gap:platform="android" gap:qualifier="hdpi" />

    <!-- 720px x 1280px -->
    <gap:splash src="splash/android/screen-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />

    <!-- 960px x 1440 -->
    <gap:splash src="splash/android/screen-xxhdpi.png" gap:platform="android" gap:qualifier="xxhdpi" />   

    <!-- iOS Splash Screens -->
    <gap:splash src="splash/ios/Default.png"                       gap:platform="ios"       width="320" height="480" />
    <gap:splash src="splash/ios/Default@2x.png"                    gap:platform="ios"       width="640" height="960" />
    <gap:splash src="splash/ios/Default-568h@2x.png"               gap:platform="ios"       width="640" height="1136" />
    <gap:splash src="splash/ios/Default-Portrait.png"              gap:platform="ios"       width="768" height="1024" />
    <gap:splash src="splash/ios/Default-Landscape.png"             gap:platform="ios"       width="1024" height="768" />
    <gap:splash src="splash/ios/Default-Portrait@2x.png"           gap:platform="ios"       width="1536" height="2048" />
    <gap:splash src="splash/ios/Default-Landscape@2x.png"          gap:platform="ios"       width="2048" height="1536" />

For each of the icons and splash screens you have added to your config.xml file, create the corresponding file in the referenced directory. You do not need to follow this exact format, just make sure that the src attribute links to wherever the file physically resides.

If you do not plan on making your application available for tablets it is not necessary to include the corresponding splash screens. You will also notice right at the beginning we declared a default icon and splash screen, this should reside in the root of your application folder (the same folder that your index.html would likely be in). You must not place the default files in a subdirectory along with the rest of your icons and splash screens.

Obviously we’re including a lot of graphic resources here which are of course going to increase the resulting file size. You can read the following post about how to use PhoneGap Build’s .pgbomit feature to decrease your applications file size by not redundantly including unnecessary splash screens and icons for other platforms.

Screenshots and Artwork for App Store Submission

When submitting to app stores you will find a somewhat lengthy form you need to fill out. This includes the description of your application, content rating etc. but also screenshots and artwork for your application to be displayed in the app store. Here’s what you can expect…

Apple

The Apple App store requires that you submit at least one screenshot, but you would be wise to include about 4-5. Screenshots are the most valuable thing you have to convince a potential user to download your app in the split second they take to decide when viewing your listing.

You will need to provide screenshots for both the 3.5 inch iPhones and the 4 inch iPhones. You should also include iPad screenshots if your application is intended for tablets. The dimensions required are as follows:

3.5 inch

  • .jpg or .png format
  • RBG color space
  • 960×640, 960×600, 640×960 or 640×920 resolution

4.5 inch

  • .jpg or .png format
  • RBG color space
  • 1136×640, 1136×600, 640×1136 or 640×1096 resolution

iPad

  • .jpeg, .jpg, .tif, .tiff or .png format
  • RGB color space
  • 1024×768, 1024×748, 768×1024, 768×1004, 2048×1536, 2048×1496, 1536×2048 or 1536×2008 resolution

Obviously the easiest thing to do is to take out your iPhone 4 and iPhone 5 and take some screenshots of your application in use. The reality is though, it’s going to be extremely unlikely that you would have more than one iPhone. The next best option would be to borrow the appropriate iDevice’s from a friend or colleague but it’s a hassle to have to rely on people to do these things.

I still only have an iPhone 4 and typically I’ll do one of the following to gather the necessary screenshots:

  • Take the iPhone 4 screenshots and add an overlay using an image editing program to account for the difference in resolution:
iPhone 4 Example

iPhone 4

iPhone 5 Example

iPhone 5

  • Take a screenshot of my application running through a browser and resize down to the appropriate resolution

As well as the screenshots, Apple also requires that you submit a 1024 x 1024 version of your applications icon. I find it’s best to design one version at 1024 x 1024 initially and then resize down to all the other sizes that are required.

Google Play

Google Play requires that you submit at least 2 screenshots overall, but again you should definitely include more than that. As is usually the case, Google Play doesn’t have as strict requirements for the screenshot as Apple does. The images uploaded must be .jpeg or .png and the minimum length for any side is 320px and the max length for any side is 3840px.

You will notice fields for uploading both 7-inch and 10-inch tablet screenshots – these must be included if you want your application to appear in Google Play’s ‘Designed for tablets’ section. As well as the screenshots, you will be asked to upload a Hi-res icon, Feature Graphic and Promo Graphic. The restrictions for these are as follows:

Hi-res icon

  • .png file type
  • 512×512 resolution

Feature Graphic

  • .jpg or .png file type
  • 1024×500 resolution

Promo Graphic

  • .jpg or .png file type
  • 180×120 resolution

Preparing all the necessary icons, splash screens and screenshots is a frustrating and time consuming process. It’s usually performed right at the end of the project when you’re excited to finally release your application as well. Don’t rush this process though. Well designed splash screens and screenshots can most definitely be the difference between your application looking slick and professional, or quick and sloppy.

Check out my latest videos: