13 December 2023

How to Add a Splash Screen to Your iOS App

By Ronald Smith

When you open a mobile app, the first thing that greets you is the splash screen. It’s like an introduction, designed to enhance your experience and showcase the app’s brand. It assures you that you’ve opened the right app and gives the app a chance to flaunt its logo.

Not only that, according to Apple, a well-designed splash screen can create the impression that the app is fast and responsive. So, if you have an iOS app, why not consider adding a splash screen?

In this tutorial, in our series on Cordova, we’ll guide you on how to create a splash screen. Before we dive into it, make sure you’ve already followed our previous posts where we:

  • Set up a Cordova project for mobile app development
  • Created a basic user interface with jQuery Mobile

So here’s what we’ll be doing next: adding an app icon. But before we get into that, let’s first figure out the sizes we need for the Splash Screen. Just like with the app icon, the sizes for the Splash Screen will depend on the version of iOS your app will support. For this example, we’ll need three different image sizes. Take a look at the table below for the details:

| Size/Platforms | iOS 6.x | iOS 7.x |

|—————-|———|———|

| 320×480 | ✔ | |

| 640×960 | ✔ | ✔ |

| 640×1136 | ✔ | ✔ |

Now that we know the sizes we need, let’s move on to adding the app icon.

In this simplified table, we’ll classify the image sizes supported by different versions of iOS. I’ll assume that iOS 7 is only installed on iPhones with a Retina display. So, for iOS 7, we only need the highest image sizes: 640×960 and 640×1136, which are used in iPhone 5 and 5c with a 4-inch screen.

Now that we know the sizes, we can start creating the Splash Screen images. You can use whichever application you’re comfortable with to create the images. Just make sure to save them as PNG files and name them according to the following convention.

These are the standard filenames that Cordova and Xcode use to recognize the Splash Screen image. Following this convention will save us from unnecessary setup in Xcode to find the custom file names.

Check it out! I made this awesome Splash Image using Photoshop.

How to Add a Splash Screen to Your iOS App

Welcome to the Splash Screen!

Alright, let’s get started by adding a splash of personality to our app. We’ll be inserting a fabulous splash screen image. To do this, simply follow these steps:

  1. Firstly, you’ll want to gather your images and move them to a special destination folder. In this case, it’s “/platforms/ios//Resources/splash”.
  2. Next, open up Xcode and hit the Play button to compile the app. Before you know it, the fantastic image will appear on the iPhone Simulator!
  3. Watch as the splash screen makes a grand entrance, greeting your users for a few seconds before they fully immerse themselves in the app.

Isn’t it amazing how a simple splash screen can make such a difference? Now, let’s get back to the app and dive right into the excitement!

How to Add a Splash Screen to Your iOS App

Final Thoughts

Okay, let’s sum everything up. We’ve got the content for our app (even though it’s just a practice version), two menu options on the right that slide out like they do on Facebook, an added icon, and now we’ve just included a Splash Screen. Our app is almost finished, and we’re getting really close to completing it and launching it.

So, in our next post, I’ll show you how we can take all of this and put it together into an app that we can actually distribute using Phonegap. Sound good? Stay tuned!