Check out a free preview of the full Intermediate React Native course

The "iOS App Icon" Lesson is part of the full, Intermediate React Native course featured in this preview video. Here's what you'd learn in this lesson:

Kadi walks through adding an app icon to the iOS version of the project, provides pre generated icon size variations, and demonstrate the resulting icon change. To add an app icon to iOS the image needs to be 1024 x 1024px.

Preview
Close

Transcript from the "iOS App Icon" Lesson

[00:00:00]
>> Next up let's look at adding app icons so an icon is basically a unique image that's added to every mobile applications is displayed on the App Store and on the home screen. And they should be as simple as possible and usually contain no text so they should look good as possible, even when they're super small.

[00:00:19]
So you can design your own icon using figma or sketch or anything else. For iOS it needs to be 1024 by 2024 and then you basically use that to create the icon. So in initial speed already created an app icon for us it's this lovely butterfly picture. Now if you open Xcode and you go to mood tracker and images you'll see that we already have a place here for the app icon and this actually tells you all the resolutions that it needs.

[00:00:53]
And well this will be quite tedious to for you to create so there are plenty of tools out there that help you create them the tool that I use usually is called Iconizer which is basically you can download this and install it. And then this will create the icon sets for various iOS applications but in your speed again I have already created this for you so you can use the one I did.

[00:01:20]
Now if we open our icon sets, Then double click to expand it, This was created using the iconizer app that I showed earlier and it has all the different Resolutions that you might need. Now you can drag and drop them into the right boxes but actually what you can do is if you delete this.

[00:01:46]
If you select and click on the minus and then in your finder if you drag and drop, the whole icon set. In here, it auto populates. Saves you some time. Now if we click on the top level, mood tracker here and you on a general tab. This lets you edit all kinds of app information.

[00:02:12]
For example, the device orientation, you can go portrait or you can say which ones you support. So for example, by default, if you turn your phone left or right. Like the UI will adapt, but you can disable these, if you wanted to, but does this from here. And here we can also choose our app icon.

[00:02:40]
There we go. So, it just hadn't loaded it yet. So, if we had multiple app icons Most all of them will show up here and you can choose the right one, And finally, for iOS, I would close the simulator completely. So you quit it, and then rebuild from Xcode to get the new app icon.

[00:03:11]
All right, that was really quick, interestingly. So we get the icon here, but not on here. So let me just uninstall it and close this. So due to performance reasons they get quite aggressively cached. But it's definitely worked because you can see it's in the little on top of the application.

[00:03:42]
So if you close the simulator reopen clear cache, it will eventually show up. There we go. Here it is. So now we got our beautiful icon. And one thing I think I forgot to do is that here you can also change the display name. So by default, it's whatever app name you created your app as.

[00:04:03]
But for example, I could change it to mood and then this will change the mood as well.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now