Are Apple touch icons bigger than 60x60 supported, and if so, what dimensions should I use for the iPad and iPhone 4?
|
|
Use these sizes 57x57, 72x72, 114x114, 144x144 then do this in the head of your document:
This will look good on all apple devices. ;) |
|||||||||||||||||||||
|
|
With the iPad (3rd generation) there are now four icon sizes 57x57, 72x72, 114x114, 144x144. Because retina icons are exactly double the size of the standard icons we really only need to make 2 icons: 114 x 114 and 144 x 144. By setting the retina sized icon to the corresponding standard icon iOS will scale them accordingly.
|
|||||||||||||||||||||
|
|
The icon on Apple's site is 129x129 pixels. hope that answers your question. |
|||||||||||||
|
|
Updated list October 2014, iOS8 List for iPhone and iPad with and without retina
Update 2014 iOS 8: For iOS 8 and Iphone 6 plus
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:
The other resolution are still the same
|
||||
|
|
|
The relevant documentation on Apple's site, Specifying a Webpage Icon for Web Clip. There is no need to put anything in the head of your document. If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon or apple-touch-icon-precomposed prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:
|
|||||||||
|
|
Yes. If the size does not match, the system will rescale it. But it's better to make 2 versions of the icons.
You could differentiate iPad and iPhone by the user agent on your server. If you don't want to write script on server, you could also change the icon with Javascript by
This works because the icon is queried only when you add the web clip. (There's no public way to differentiate iPhone ≥4 from iPhone ≤3GS in Javascript yet.) |
|||||||||||||||||||||
|
|
I have been developing and designing iOS apps for a while and This is the best iOS design cheat sheet out there! have fun :)!
|
|||
|
|
|
Yes, bigger than 60x60 are supported. For simplicity, create icons of these 4 sizes:
Now, it's preferable to add them as links in your HTML as:
You can choose to not declare the 4 links above but just declare a single link, in which case give the highest size of You can also choose not to declare even a single link. Apple mentions that in this scenario, it will lookup the server root first for the size immediately higher that the size it wants (naming format: Icon necessities:
In versions older than iOS 7, if you don't want it to add effects to your icons, then just add the suffix |
||||
|
|
|
I think this question is about web icons. I've tried giving an icon at 512x512, and on the iPhone 4 simulator it looks great (in the preview) however, when added to the home-screen it's badly pixelated. On the good side, if you use a larger icon on the iPad (still with my 512x512 test) it does seem to come out in better quality on the iPad. Hopefully the iPhone 4 rendering is a bug. I've opened a bug about this on radar. EDIT: I'm currently using a 114x114 icon in hopes that it'll look good on the iPhone 4 when it is released. If the iPhone 4 still has a bug when it comes out, I'm going to optimize the icon for the iPad (crisp and no resize at 72x72), and then let it scale down for old iPhones. |
||||
|
|
|
For iPhone and iPod touch, create icons that measure:
For iPad, create an icon that measures:
|
||||
|
|
