Configuring App Icons & Launch Screens in SwiftUI
Written by Team Kodeco
As developers, one of the things we strive for is to create an app that not only works well but also looks good. One of the ways we can achieve this is by customizing our app’s icon and launch screen. In this cookbook entry, you’ll learn how to do just that in your SwiftUI app.
Adding an Icon to a SwiftUI App
When you create a SwiftUI project, Xcode automatically includes a default asset catalog named Assets.xcassets that contains the AppIcon set. If you wish to change the app icon, follow these steps:
Note: If you want to try out this example, you can download an archive containing an example app icon and launch screen here.
- In the Project navigator, select Assets.
- Next, select AppIcon.
- Then, select the square 1024-by-1024-pixel space for your iOS app icon.
- Drag and drop your app icon image into the slot.
Now build and run, then tap the Home button in the simulator’s device bezel and you should see the updated app icon:
If you change your mind about which icon to use or if Xcode complains about an incorrectly sized file, just drag a new one on top of the one you no longer wish to use. This is the easy part of finding the perfect app icon!
Adding a Launch Screen to a SwiftUI App
To add a launch screen to your app, first drag the image file you want to use for this into your project’s asset catalog. Next, you need to configure a launch screen in your app’s information property list, info.plist:
- In Xcode, select your target and go to the Info tab.
- In the Custom iOS Target Properties section, find the
Launch Screen
key. Expand this key by clicking on the disclosure indicator. If you don’t see theUILaunchScreen
key, you’ll need to add it. Click on the Add button (+), type inUILaunchScreen
and press Return. - Once you have the
UILaunchScreen
key in place, click on the plus button (+) to add additional keys that specify the configuration options for your launch screen. Here you’ll wantUIImageName
, which Xcode will change to simplyImage name
. Then add the name of your launch image, which islaunch-logo
in this example, as the value.
Now build and run your app and you should see the launch screen!
You can define the appearance of your launch screen by specifying a combination of launch screen options from the possible keys in UILaunchScreen
. For instance, you might add a UIColorName
key to specify a launch background color or UIImageRespectsSafeAreaInsets
to say whether the image respects the safe area or extends all the way to the edges of the device screen.
The process above allows you to customize your app’s launch screen. However, keep in mind that the launch screen is not intended to provide an app preview nor an extensive branding opportunity. It’s primarily used to enhance the perception of your app’s responsiveness at launch.
And that’s it! With just a few simple steps, you can change your app’s icon and launch screen to create a more polished look and feel.