I want to share these lessons with you so that you can avoid them yourself.
My two issues were the following:
- I had a feeling I did not have all the right image sizes for the icons and splash screens, and
- I kept seeing an older version of my splash screen when the simulator started the app.
If you ever run across these questions during your own app development, let me explain the answers in words and pictures, and give you a tool to help you avoid this problem altogether.
iOS App Icon Sizes
Remember to ask your designer for all the necessary icon sizes you will need for today’s set of iOS devices, including the iPhone 6 and iPhone 6 Plus.
I’ve included a complete list below, with the newest size bolded for your easy reference:
- iPhone 6 Plus: 180 x 180 px
- iPhone 4/5/6: 120 x 120 px
- iPhone (older): 57 x 57 px
- iPad Retina: 152 x 152 px
- iPad 1/2/Mini 1: 76 x 76 px
iOS Launch Image Sizes
The launch image, sometimes called a splash screen, is what you see displayed for a few seconds immediately after launching the app.
While you can now create launch images through the use of Storyboards in XCode, I still prefer to create the files separately.
The lesson I learned, of course, is to make sure your launch image files are in the correct folder referenced by your XCode project. The path in XCode should be the following:
Hint: If you’re still having trouble knowing where to place your launch image files, do the following:
- In XCode, go to the Project Navigator window.
- Click on the Images.xcassets folder, which should be just under your app name.
- Select LaunchImage to the right. You will then see a display of various launch images linked to your project.
- If you notice any that are missing or displaying an older image, right click on that image, and select ‘Show in Finder’. That will tell you where XCode is looking to load your launch images.
Below is the list of launch image sizes and their corresponding filenames, again with iPhone 6/6 Plus bolded for reference:
- Default.png: 320 x 480
- Default@2x.png: 640 x 960
- Defaultfirstname.lastname@example.org: 640 x 1136
- Defaultemail@example.com: 750 x 1334 (iPhone 6, Portrait)
- Defaultfirstname.lastname@example.org: 1242 x 2208 (iPhone 6 Plus, Portrait)
- Default-Landscapeemail@example.com: 1136 x 640
- Default-Landscapefirstname.lastname@example.org: 1334 x 750 (iPhone 6, Landscape)
- Default-Landscapeemail@example.com: 2208 x 1242 (iPhone 6 Plus, Landscape)
- Default-Portrait.png: 768 x 1024
- Default-Portrait@2x.png: 1536 x 2048
- Default-Landscape.png: 1024 x 768
- Default-Landscape@2x.png: 2048 x 1536
NOTE: You may notice some resources include a ~iphone or ~ipad. Apple calls this a device modifier, and it is entirely optional. The only real reason you might want to include a device modifier is when you want to show two different images (of the same size) for different devices.
Again, since many of you are building apps part-time, be sure to incorporate these sizes into your processes, and particularly with your designers.