Setting up an app icon is a simple process in Xcode 8, but you need to know the sizes that icons should be when importing them into your apps. Learn how to import and set icons for your apps.
- [Instructor] If you run an application in the iOS simulator and then go to the home screen which you can do with the keyboard shortcut shift + command + h or hardware home. You're going to see the default icon for your application. That's this white rounded square with all of these lines in it and circles. This icon can not be submitted as your apps icon to the app store. And usually supplying an icon is one of the last things you do before submitting your application. Which is why we're talking about it in this course and not a previous course in the series.
So lets look at how applied app icons works in Xcode and iOS 11. So I'm going to head over to Xcode and I have assests.xcassests selected in the projects navigator. And then I've selected app icon in the editor. Here you're going to see a whole bunch of empty squares with descriptions for different icons for the iPhone, iPad, and even the iOS appstore. So here what we need to do is drag in the appropriate images.
Meaning, they must be the appropriate sizes. Now, most likely you're familiar using iOS and you've heard of the retina displays. Devices with retina displays have twice or three times the pixel density as the devices without the retina displays. So, to determine the size of the image you need, for each one of these squares what you need to do is look at the point size, which in this case is 20. And multiply that by the resolution scale.
So for example, this 20 point image times 2 would be a 40 point image. That refers to both the width and the height. So all of these images are going to be square. So we need an image that's 40 pixels wide by 40 pixels high and then we can drag it into this square. For the 3x version, we take 20 multiply it by 3 we get 60 pixels wide by 60 pixels high. And we can drag that image in here.
For the other images, we do the same thing. We take the point size multiply it by the resolution scale and you can drag an image in there. So for iPhone, these are all going to be 2x and 3x images. For iPad you're going to see 1x and 2x images. So just pay attention to that when and if you decide to support the iPad. So lets scroll up and look at bringing images into here. So I'm going to tab over to finder. And I'm inside my assets folder.
For those of you who don't have access to the exercise files, you can use any square image for this. You want to make sure that you start out at a higher resolution like 1024 by 1024 and then save it out as the smaller resolutions. If you want to shortcut, you just want to see it working and load it in the simulator you don't care to support all of these differenticon sizes just yet. You can actually just start out by supporting just iPhone app iOS 7 through 11. Which is the 60 point image.
So back over in my assets folder, I'm just going to click and drag these images into the appropriate slot. So icon 20 at 2x is going to go here, icon 20 at 3x is going to here, et cetera. Now it's important to keep in mind that I've named these for convenience in dragging them in we don't actually get any advantages if we were to create onw asset with the 2x and 3x callouts and just drag it in over here Xcode actually won't distribute all of these icons appropriately if we just drag them in.
So for that reason you're going to have to drag them in one by one. So again, I just named them like this for your convenience. So we'll drag in the 29 point ones, right there. And then we have the 40 point ones. It's important to note too that Apple wants square images. The rounded corners are provided by the operating system and could change in radius over time as the operating system updates. So for that reason, you should provide square images and not round your own corners.
iOS also does not support transparency at this time so do not use transparency in your image or some other color will be filled in the background if you do have transparency. So we have square images no transparency no rounded corners. So we'll support 60 point images there's the 2x and the 3x one. And then finally at the very bottom is the appstore that's a 1x so 1024 times 1 and that gives us our 1024 by 1024 image.
Click and drag that in. And there we go there is our application icon. So at this point we should be able to just run the application in simulator head back to the home screen and see our applications icon. Now once we supply icons, we start to see that we're not supporting iPad apps. And again, for what we're doing, I just want to support iPhone for now so when you release an application, if you are going to support iPad, make sure you supply those icons. So lets go to the home screen.
And then there's our application icon it has the rounded corners and everything. So to create application icons you need to create files that are the right size and then you get that size by multiplying the point size by the resolution scale.