Hi,
I'm making an Apple-Touch-Icon.
One site says the png should be 57 x 57px.
Another site says 129 x 129 to fit iPad and smaller devices will automatically scale it down.
Then a 3rd site says to create multiple files and use this in the <head> tag:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3.png" />
What about iPhone5+ ?
Is there a standard icon size? If so, what is it?
Thanks,
Nancy O.
This is the code I have been using and have tested on iPhone 3, 4, 5, iPad 2, 3 and some random Android phones/tablets. Seems to work well. If you are designing it yourself, be sure to make them all "precomposed" or the devices will add the rounded corners, gloss and shadow to your icon - unless that's what you want of course.
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
<!-- For iPhone with high-resolution Retina display (iPhone 5 included): -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices (57x57): -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
I have some more info regarding removing the automatic gloss that is applied by Apple here:
http://geek.martinwahlberg.com/apple-touch-icon-precomposed
Good luck.
North America
Europe, Middle East and Africa
Asia Pacific