What are the correct pixel dimensions for an apple-touch-icon?

Asked 4/8, 2008 at 21:17 Answered 20/4, 2014 at 20:43

Solved iphone favicon apple-touch-icon

I'm not sure what the correct size should be.

Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.

Hanselman's and playgroundblues's comments suggest different sizes including 163x163 and 60x60.

Apple's own apple.com icon is 129x129!

See my related question: How do I give my web sites an icon for iPhone?

Zinck answered 4/8, 2008 at 21:17 Comment(3)

Related: Why am I getting error for apple-touch-icon-precomposed.png and an additional good online resource seems to be: Everything you always wanted to know about touch icons (Mar 2011; by Mathias Bynens) – Onesided 2/9, 2013 at 8:48

Now Apple.com's icon is 152x152 ... – Idolla 18/10, 2013 at 21:1

developer.apple.com/library/ios/documentation/AppleApplications/… – Trough 22/10, 2013 at 14:50

It seems that Apple guidelines as of August 3, 2010 now include the "High resolution" images (for iPhone 4) in their "required" icon sizes.

Looks like we need to provide both a 57x57 and a 114x114 image now, as well as a 640x960 title image.

See Custom Icon and Image Creation Guidelines (Javascript required) which is part of a whole document:

iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)

Selenium answered 16/8, 2010 at 6:15 Comment(4)

I had some trouble getting the title images to work. Found a working example here: gist.github.com/472519 ( section) – Ningpo 25/11, 2011 at 13:36

Note that iPads use the following sizes for icons: 72x72 1st and 2nd gen; 144x144 for 3rd gen "Retina". – Lochner 31/5, 2012 at 16:47

Since the OP is talking about the apple-touch-icon (i.e. the image iOS plucks from a website to display as an icon on the Home screen), and not a native app's own icons, the 640 x 940 title image is not relevant here. (That said there is a 'Start Up' image of 320 x 480, as described here – Lyra 20/6, 2012 at 8:26

This link no longer works, see developer.apple.com/library/ios/documentation/AppleApplications/… instead – Bein 14/11, 2013 at 11:45

Depends on how much detail you want it to have, it needs to have the aspect ratio of 1:1 (basically - it needs to be square)

I would go with the Apple's own 129*129

Semiramis answered 4/8, 2008 at 21:36 Comment(0)

Apple specs specify new sizes for iOS7:

60x60
76x76
120x120
152x152

Whereas old sizes for iOS6 and prior are:

57x57
72x72
114x114
144x144

By the way, precomposed icons are deprecated.

As a consequence, to support but new devices (running iOS7) and older (iOS6 and prior), these 8 pictures must be present and the generic code is:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

In addition, you should create a 152x152 picture named apple-touch-icon.png.

You might want to know that this favicon generator can generate all these pictures at once. Full disclosure: I'm the author of this site.

Cirone answered 15/1, 2014 at 22:4 Comment(0)

The official size is 57x57. I would recommend using the exact size simply due to the fact that it takes less memory when loaded (unless Apple caches the scaled representation). With that said, Rex is right that any square size will work

Netty answered 6/8, 2008 at 4:10 Comment(0)

I don't think there is a "correct size". Since the iPhone really is running OSX, the icon rendering system is pretty robust. As long as you give it a high-quality image with the right aspect ratio and a resolution at least as high as the actual output will be, the OS will downscale very cleanly. My site uses a 158x158 and the icon looks pixel-perfect on the iPhone screen.

Antaeus answered 4/8, 2008 at 21:22 Comment(0)

Updated list October 2014, iOS8

List for iPhone and iPad with and without retina

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

Update 2014 iOS 8:

For iOS 8 and iPhone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">

iPhone 6 uses the same 120 x 120 px image as iPhone 4 and 5 the rest is the same as for iOS 7

Update 2013 iOS7:

For iOS 7 the recommended resolutions changed:

for iPhone Retina from 114 x 114 px to 120 x 120 px
for iPad Retina from 144 x 144 px to 152 x 152 px

The other resolution are still the same

57 x 57 px default
76 x 76 px for iPads without retina

Beitris answered 12/11, 2013 at 16:6 Comment(0)

You don't have to bother for correct size any more. If you have iTunes artwork file (i.e. file of 1024*1024 size) of your icon, then I have created this application which will provide you all the icons based on information provided here. Get the application from here, and follow the instructions in readme file to create all the required icons for iOS application.

Hulsey answered 20/4, 2014 at 20:43 Comment(0)

Recommended topics

Hot tags