25

Does anyone know the correct file names for high resolution app icons in iOS? I've only been able to find the following documentation on the Apple Developer site, which is unfortunately out of date - http://developer.apple.com/library/ios/#qa/qa1686/_index.html.

This is my best guess... although I'm fairly sure I'm wrong!

App - 144px x 144px - Icon-72@2x.png  
Spotlight - 100px x 100px - Icon-Small-50@2x.png  
Settings - 58px x 58px - Icon-Small@2x.png

Any suggestions would be greatly appreciated!

Matt Elkins
  • 300
  • 1
  • 3
  • 5
  • Now the question is, can Apple put the px resolutions and their names on one page, so we don't have to go back and forth trying to match them! Heh... time to do some extra work on this one... – Stephen J Jan 13 '14 at 14:06

3 Answers3

47

Here and here is the right documentation. Basically, you add new icons with the suffix @2x and with double size as the documentation says:

For apps that run on devices with Retina displays, two versions of each icon should be provided, with the second one being a high-resolution version of the original. The names of the two icons should be the same except for the inclusion of the string @2x in the filename of the high-resolution image.

  • App Icon: Icon-72@2x.png - 144 x 144
  • Spotlight: Icon-Small-50@2x.png - 100 x 100
  • ...
Squig
  • 862
  • 6
  • 15
sch
  • 27,436
  • 3
  • 68
  • 83
  • Thanks for your reply! I've come across both of those pages in the documentation before, and although they provide the pixel dimensions, there is no _specific_ content describing how the icon files should be named. However, based on your examples above, would the guesses I made in my original post be correct? – Matt Elkins Mar 20 '12 at 01:21
  • I've just read [this page](http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW1) again, and I think this pretty much confirms it: _"The names of the two icons should be the same except for the inclusion of the string @2x in the filename of the high-resolution image."_. Thanks again for your reply! – Matt Elkins Mar 20 '12 at 01:25
5

One thing you need to know is that the dimension of retina images will be double to that of regular imagesand for retina you should be use naming conventionwith @2x

example-iPhone app icon (for regular)icon.png (57*57) (for retina)icon@2x.png(114*114)

iPad app icon size 72*72 (for regular) 144*144(for retina) and naming convention should be with @2x for retina. Hope this might be helpfull for you. Thanks

Rich
  • 5,603
  • 9
  • 39
  • 61
user1240409
  • 75
  • 8
1

This is from the docs linked above. I am exporting SVG's and need a way to separate the icons by function, so I'm using the older name method. Use the chart like this, whatever's on the left, append .png. To do retina, double the numbers and do the usual. Apple didn't put the names with the images, and while this is not exhaustive, it should be enough for most uses. Double-check for future and I may have even messed up on current, so don't take this as a final word.

Universal apps need to append ~iphone or ~ipad to the end of the string for disambiguation to avoid collision. This is not required if nothing conflicts, it seems from the docs. Name (add .png to it) - base res width x height.

Launch Images:
iPhone:
Default - 320x480
Default-568h - 640x1136 (only @2x, do not double this number)
iPad
Default - 768x1024 (portrait)
Default-Landscape - 1024x768 (multiple orientations supported in iPad, see document)

App Icon:
iPhone
Icon - 57x57
iPad
Icon-72 - 72x72

Search Result Icon (Spotlight)
Icon-Small - 29x29 (also used on all device Settings)
Icon-Small-50 - 50x50 (Search results on iPad)

iTunes Art
iTunesArtwork  - 512x512

From Docs Here

edit: The reason I posted this chart is for ease of use. Apple put the icon names far away from their resolution in that paper.

Stephen J
  • 2,367
  • 2
  • 25
  • 31