iOS how to set app icon and launch images
Asked Answered
P

14

254

How do I set the images so that I can archive and validate my app? The screen looks like this now:

enter image description here

So the first one says 29pt, but then it also says 2x. So do I put a 29x29 image or a 58x58 image? And where do I put all of the other ones? (I know that there are more sizes than 29, 40, and 60).

Anyway, what I tried was I dragged a 29x29 png onto the first slot, a 40x40 onto the second, and a 60x60 onto the third and fourth. When I went to Product->Archive, I get

/Users/kendon/Documents/iPhone Apps/Sales Tool/Sales Tool/Images.xcassets: The app icon set named "AppIcon" did not have any applicable content.

Plural answered 27/1, 2015 at 12:26 Comment(5)
select appicon and tap attribute inspector ,it also shows the dimension required 29x29 for 1x and 58x58 for 2x etcHalfmoon
You can use this website to make all the app icons makeappicon.comSollars
Why can't we just do this in Xcode itself?No special apps or websites. One large image only, that would be too easy wouldn't it. This is how I do in UnityCircinus
It seems as if the image is too close to the edges of the white background in the icon, is there a way to make the image smaller but keep the same pixel to pixel ratio that is required? This was after using makeappicon.comProtamine
Its no longer used in iOS 13. Its deprecated.Achromatize
P
285

I recently found this App called Icon Set Creator in the App Store which is free, without ads, updated on new changes, straight forward and works just fine for every possible icon size in OSX, iOS and WatchOS:

In Icon Set Creator:

  1. Drag your image into the view
  2. Choose your target platform
  3. Export the Icon Set folder

iconSetCreator

In XCode:

  1. Navigate to the Assets.xcassets Folder
  2. Delete the pre existing AppIcon
  3. Right click -> Import your created Icon-Set as AppIcon and you're done

Presto answered 15/7, 2017 at 20:48 Comment(1)
This turned out to be a great asset for me while I was wrestling with understanding the app icon system for my Enterprise apps. It's worth mentioning, though, that a little clarity with how it works is in order. The app does not specifically tell you the name or location where the newly generated images are saved. This being an iOS application, it took me a while to realize that the app created a folder named 'iOS' and then saved the images there inside another folder named 'Appicon.appiconset.' When ready to import into the project, it is THIS folder you should select.Cushy
P
248

Update: Unless you love resizing icons one by one, check out Schmoudi's answer. It's just a lot easier.

Icon sizes

enter image description here

Above image from Designing for iOS 9. They are the same for iOS 10.

How to Set the App Icon

Click Assets.xcassets in the Project navigator and then choose AppIcon.

enter image description here

This will give you an empty app icon set.

enter image description here

Now just drag the right sized image (in .png format) from Finder onto every blank in the app set. The app icon should be all set up now.

How to create the right sized images

The image at the very top tells the pixels sizes for for each point size that is required in iOS 9. However, even if I don't get this answer updated for future versions of iOS, you can still figure out the correct pixel sizes using the method below.

Look at how many points (pt) each blank on the empty image set is. If the image is 1x then the pixels are the same as the points. For 2x double the points and 3x triple the points. So, for example, in the first blank above (29pt 2x) you would need a 58x58 pixel image.

You can start with a 1024x1024 pixel image and then downsize it to the correct sizes. You can do it yourself or there are also websites and scripts for getting the right sizes. Do a search for "ios app icon generator" or something similar.

I don't think the names matter as long as you get the dimensions right, but the general naming convention is as follows:

Icon-29.png      // 29x29 pixels
[email protected]   // 58x58 pixels
[email protected]   // 87x87 pixels

Launch Image

Although you can use an image for the launch screen, consider using a launch screen storyboard file. This will conveniently resize for every size and orientation. Check out this SO answer or the following documentation for help with this.

Useful documentation

The Xcode images in this post were created with Xcode 7.

Pacificism answered 21/8, 2015 at 8:52 Comment(7)
For me, In XCode 7.2, XCode doesn't allow you to drag images to those boxes. Can you help me with that?Recitativo
@ahitt6345: I tested this again with Xcode 7.2 and it still works. Open Finder and locate your images in whatever folder you have them. Then drag them into the correct app icon set location in Xcode as shown above. If your image is in the wrong format, then it might not work. Use .png format.Pacificism
They are .png format, I have tried dragging and dropping once again and it still did not work.Recitativo
@ahitt6345, Check out this YouTube video tutorial. It may help to see it being done in action.Pacificism
I had problems dragging them as well until I changed the format of the png to match the location to which I was dragging it. This is with Xcode 8.3Collegian
Nice answer! On github you find a new little script: github.com/smallmuou/ios-icon-generatorImpractical
I used appicon.co to generate icons and imported them in the project, working fine!Centriole
G
25

To save a bit time:

1) You can mark your app icon images all in finder and drag them into your Assets catalog all at once by dragging into one of the empty slots of the app icon imageset. When you hold your drag over the slot, several of the other slots look selected and when you drop those all will be filled up at once. Note that this works in XCode 8 (I haven't tried XCode 7), but in XCode 9 beta not yet.

Dragging into app icon Asset catalog imageset

2) The "Technical Q&A QA1686" apple documentation site has the sizes per app icon slot already calculated for you in a nice image and also contains the correct image names conventions.

App icon sizes

Gardol answered 3/9, 2017 at 0:9 Comment(0)
G
17

I've tried most of the above and a few others and have found https://appicon.co to be the easiest, fastest, and provides the most comprehensive set.

  1. Drag your image onto the screen
  2. Click Generate
  3. Open the file just downloaded to your Downloads folder

Here, you may be able to drag this entire folder into Xcode. If not:

  1. Double-click the Assets.xcassets folder
  2. Select all files
  3. Drag them to Assets.xcassets
  4. Rename it to AppIcon
Garton answered 30/12, 2020 at 20:50 Comment(2)
Steps 4-7 a bit different now in Xcode 13: downloaded folder is called AppIcons, inside it is the folder called Assets.xcassets, inside that is the folder AppIcon.appiconset, drag this folder into your project's Assets.xcassets folder and agree to "Replace".Stefanysteffane
Thanks for this!Penrose
F
12

The correct sizes are as following:

1)58x58

2)80x80

3)120x120

4)180x180

Feme answered 27/1, 2015 at 13:24 Comment(0)
I
10

I use a tool called Prepo to produce all the right image sizes. You simply feed the app you image file and it will spit out each necessary file with an appropriate name.

Once you do this, you can then drag in the appropriate files or simply point to your Prepo exported folder.

Incrassate answered 8/3, 2016 at 2:2 Comment(2)
It does not do 167x167 icons for latest IpadsLucaslucca
It actually does generate 167x167 when you export the images. It just doesn't show that size (and many other sizes) in the preview windowBronwynbronx
Z
10

Now a days is really easy to set app-icon, just go to https://makeappicon.com/ add your image, they will send you all size of App-icon (Also for watch & itunes as well), now Click Assets.xcassets in the Project navigator and then choose AppIcon. Now you just have to drag n drop the icon as required.

Zabrine answered 21/2, 2017 at 13:31 Comment(0)
H
10

I found App called Iconizer. You can find repository on github. Iconizer can generate app icons for OS X, iPad, iPhone, CarPlay and Apple Watch with just one image.

Simply Drag and Drop your icon onto Iconizer, select the platforms you need and whether or not you want all platforms generated into one asset catalog, then hit export.

After that just replace (delete and import) your AppIcon in the Assets.xcassets

Herrington answered 28/11, 2018 at 14:30 Comment(1)
I have tried it, the exported image of 1024 px is larger in size than the original and the color is bad.Mishmash
D
7

In the left list, right click on "AppIcon" and click on "Open in finder" A folder with name "AppIcon.appiconset" will open. Paste all the graphics with required resolution there. Once done, all those images will be visible in this same screen(one in your screen shot). then drag them to appropriate box. App icons have been added. Same process for Launch images. Launch images through this process are added for iOS 7 and below. For iOS 8 separate LaunchScreen.xib file is made by default.

Deer answered 27/1, 2015 at 12:56 Comment(0)
P
5

I quite like this app made by Jordi Bruin called Bakery

It allows emoji and SFSymbols for quick prototyping (not for the App Store in this case!)

It is as easy as drag and drop your design to the app and then again drag and drop to the asset catalog without having to fill in all the sizes by hand.

enter image description here

Peeper answered 9/7, 2021 at 13:47 Comment(0)
M
4

You can get away with just adding a single image of size 1024*1024px.

Just add the image in like so enter image description here

and select single size in the menu to the right.

Maihem answered 13/2, 2023 at 14:28 Comment(2)
this question asked in 2015 and that version of Xcode requires all sizes of imageSpecialism
@NhatNguyenDuc thanks for the heads up, hopefully my comment can still help anyone coming to this thread in the futureMaihem
K
2

This is a very frustrating part of XCode. Like many, I wasted hours on this when I switched to a newer version of xcode (version 8). The solution for me was to open the properties for my project and under the "App Icons and Launch Images" choose the "migrate" option for the icons. This made absolutely no sense to me as I already had all my icons there, but it worked! Unfortunately I now seem to have two copies of my launcher icons in the project though.

Kovrov answered 26/12, 2016 at 2:50 Comment(1)
This was what I needed for updating a very old (iOS 3) project for iOS 11.Rodroda
L
2

As per updated version(Xcode 8.3.3) I saw that below resolution are required for all fields of AppIcon sets.

40x40
58x58
60x60
80x80
87x87
120x120
180x180

It comes with hdpi, xhdpi, xxhdpi etc. Hope it will helps others.

Edited to 120x120

Lewd answered 13/11, 2017 at 7:3 Comment(0)
R
1

You can easily do it without resizing yourself or doing anything, just choose your icon at an app store icon generator website https://getappscreenshots.com/app-icon-generator and it'll generate all required files and all icon sizes so you can just copy the files and paste in your project's folder!

Roseannaroseanne answered 27/9, 2020 at 12:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.