Create an Engaging Splash Screen for Your iOS App

Note: This post was first published on July 14, 2014.

Splash screens appear for a few seconds when you launch a mobile app, serving multiple purposes that enhance the user experience and strengthen your brand. They reassure users that they’ve opened the correct app and provide a perfect opportunity to showcase your app logo. To learn more about designing app icons, check out our guide on creating app icons.

According to Apple, a well-designed splash screen can also make your app appear faster and more responsive. If you’re developing for iOS, incorporating a splash screen is definitely worth considering.

This tutorial is part of our Cordova series. If you’re new here, make sure you’ve checked out our earlier posts on:

  • Setting up a project for mobile development with Cordova, here,
  • Building a basic UI with jQuery Mobile, here, and
  • Adding the app icon, here.
How to Customize Your Android Boot Animation (2 Methods)

How to Customize Your Android Boot Animation (2 Methods)

Have you ever seen an eye-catching boot animation on a friend's Android device or online? Customizing your own... Read more

Prepare Your Splash Screen Images

First, let’s determine the required image sizes for different iOS versions. As with app icons, the necessary dimensions for splash screens vary by iOS version. Below is a table detailing the sizes needed:

Size/Platforms iOS 6.x iOS 7.x

We assume iOS 7 is installed only on iPhones with Retina displays. Therefore, the highest resolutions, 640×960 and 640×1136, are necessary for devices like the iPhone 5 and 5c, which have a 4-inch screen size.

After determining the sizes, you can create your splash screen images using any graphic design software you’re comfortable with, such as Photoshop. Save your images as PNG files, following the naming conventions used by Cordova and Xcode. This will simplify setup and ensure your images are recognized by Xcode automatically.

Example of naming splash screen files for iOS app

Here’s an example of a splash image I created with Photoshop:

Sample splash screen for iOS app

Implement the Splash Screen

Now, let’s add the splash screen image to your app. Move your images to the following directory: {TheProjectDirectory}/platforms/ios/{TheAppName}/Resources/splash. Next, compile the app in Xcode by pressing the Play button. Your app will launch in the iPhone Simulator, displaying the splash screen for a few seconds before transitioning to the main app.

Demo of iOS app launching with a splash screen

Wrapping Up

We have now added engaging content, navigation menus, an app icon, and a splash screen to our app. It’s nearly complete and almost ready for launch. Stay tuned for our next post, where we’ll discuss how to compile your app into a distributable format using Phonegap.