Menu
On Apple iPhones and iPod Touches, you specify a link to an icon file like so:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
...but on this page, it recommends that you specify two different sizes of icon, one for iPhone < 4 and another for iPhone 4.
There is no documentation I can find that shows how to specify the two separate icons. Can anyone help?
971
The graphics file is automatically scaled and cropped to fit, if necessary, and converted to PNG format. Web clip icons are 144 x 144 pixels for iPad with a Retina display, and 114 x 114 pixels for iPhone. Prevent the iOS and iPadOS device from adding a shine to the image.
Retina iPad --> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" /> The icon on Apple's site is 152x152 pixels. Hope that answers your question.
Web clip icons are 144 x 144 pixels for iPad with a Retina display, and 114 x 114 pixels for iPhone. Prevent the iOS and iPadOS device from adding a shine to the image. Open the URL as a web app without a browser (there’s no URL or search bar, and no bookmarks).
For best results, provide a square image that’s no larger than 400 x 400 pixels and less than 1 MB when uncompressed. The graphics file is automatically scaled and cropped to fit, if necessary, and converted to PNG format. Web clip icons are 144 x 144 pixels for iPad devices with a Retina display, and 114 x 114 pixels for iPhone devices.
There are plenty of documentation about this on Google.
Just use:
<!-- **normal** (iPhone/iPod **non retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<!-- **normal** (iPhone/iPod **retina** display) -->
<link rel="apple-touch-icon" href="apple-touch-icon-72.png" sizes="72x72"/>
<!-- and **iPad** version -->
<link rel="apple-touch-icon" href="apple-touch-icon-114.png" sizes="114x114"/>
As an additional info, you can have the icon without the gloss effect if you use apple-touch-icon-precomposed instead of apple-touch-icon.
and there are several tags you can use in order to have all features of Safari Mobile like splash screen, etc
also, give this Mobile Tuts article a read and you will know almost everything you need to have a brilliant web app
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
