views:

7049

answers:

7

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?

+1  A: 

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.

Rex M
+2  A: 

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

saniul
+1  A: 

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

NilObject
+2  A: 

Can you cite a source for that size?

Sure, although the official reference is under lock and key of ADC (Google cache still has it), many of the non-NDA sites have the tutorials on how to create the icons. One example is here:

DAN DICKINSON: THE PRIMARY VIVID WEBLOG

NilObject
+4  A: 

From the Google cache of Apple Developer Connection - Web Apps Dev Center - Designing Content...

Create a Web Clip Bookmark Icon

iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.

To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the element of the page.

The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.

Zack Peterson
Your answer is outdated. See http://stackoverflow.com/questions/1598/what-are-the-correct-pixel-dimensions-for-an-apple-touch-icon/3490980#3490980
Georg
A: 

NilObject's link led me to the great blog post Catchup on your Icon at makentosh.com

... Of course all of this inconsistency had to be dealt with eventually, right? Well 2.0 dealt with it in fine fashion! Finally 57x57 actually meant 57x57.

...each and every pixel ... rendered perfectly.

Zack Peterson
+5  A: 

Hello, 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.

http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW2

OtomoBill