Create Universal App icons and Splash Screen in Xcode – XSTutorials

Create Universal App icons and Splash Screen in Xcode

PLEASE NOTE: This tutorial has been written using XCode 10 and Swift 5

Every App has got its own icons and splash screen, and it’s not just about a single icon size, but Apple wants you to create a few different sizes of the same icon and splash screen. Let’s see what are the required sizes for a Universal application.

The Xcode project

Let’s say you have your own Xcode project open, your app is working great and you’re just missing the icons and splash screen. What I strongly recommend you to do a good job in a matter of slash screens is to enter the General tab in Xcode and click the Use Asset Catalog… in the Launch Image Source section. Then click the Migrate button on the top popup that will show up.

Select LaunchScreen too and delete it. This operation will create a new folder in the Assets.xcassets folder in Xcode called Launch Image. We’ll drag our splash screen images in such folder so your Universal app will display the proper image based on the device used.

The LaunchImage assets (Splash screen)

Select the Assets.xcassets folder in the left panel in Xcode, this is what you should see:

The Assets.xcassets folder in Xcode

In case the Attributes panel on the right side of the Xcode window is hidden, open it by clicking on the Hide or show the Inspectors button on the top-right corner, and click the Attributes inspector button.

The Attributes inspector panel

Since your app is Universal – as stated at the beginning of this tutorial – and you have highlighted the LaunchImage folder, check the following options (for the sake of this tutorial, we’ll deal with Portrait images only):

LaunchImage Portrait options

You’ll have to delete 2 unassigned image sets, the ones on the bottom, they have been automatically set from Xcode but are not needed. So select them and just hit the delete button.

Remove unassigned image sets

It’s time to drag your own splash screen images into each cell of the LaunchImage grid. The following sizes are the ones you have to set your images for:

iPhone Portrait iOS 7+:

  • 640px × 1136px -> Retina 4
  • 750px × 1334px -> 2x

iPhone Portrait iOS 8+:

  • 1242px × 2208px -> Retina HD 5.5″
  • 750px × 1334px -> Retina HD 4.7″

iPhone X / iPhone XS:

  • 1125 x 2436 px

iPhone XS Max:

  • 1242px × 2688px

iPhone XR:

  • 828px × 1792px

iPad Portrait iOS 7+:

  • 768px × 1024px -> 1x
  • 1536px × 2048px -> 2x

Once you have created all your splash screen images at their proper size, start dragging them from your Mac into each cell. At the end of this project, your LaunchImage window should look like this:

The LaunchImage Universal set

The AppIcon folder

Let’s now switch to the AppIcon folder, this is how it looks when it’s empty:

The empty AppIcon folder

Here’s the list of the icon size needed for this folder:

  • 20 x 20px
  • 29 x 29px
  • 40 x 40px
  • 58 x 58px
  • 60 x 60px
  • 76 x 76px
  • 80 x 80px
  • 87x87px
  • 120 x 120px
  • 152 x 152px
  • 167 x 167px
  • 180 x 180px
  • 1024 x 1024px

All the icons must not have transparent background and rounded corners. The App Store automatically rounds corners of the app icons on its website/app.

So create a copy of your app icon for each different size, keep in mind that some of them must be duplicates, and they are the 40×40, 58×58, 80×80 and 120x120px ones. You can use Photoshop or any other image editor software to design and edit your images.

Once your icons are ready, drag them one by one in their relative cells of the AppIcon‘s grid. In the end, it should look like this:

If you run your app now and watch the home screen of your device, you’ll see the custom white iOS icon switch into the new icon you’ve just assigned, and when you’ll upload your application’s binary to the App Store Connect, you will see your icon in the App icon section.

Conclusion

That’s all for this tutorial, you have learned how to set the app icons and splash screens at their right size in Xcode.

Hope you enjoyed this article, feel free to post comments about it. You can also download the full Xcode project of this tutorial, just click the link below:

Download the Xcode project

Buy me a coffee - XScoder - thanks for your support
Your support will be highly appreciated 😉