Yes! More on this again. Adding this post for a a few who may need more info.
Apple iOS has supported touch icons, also Android also has apple-touch-icon support. For web pages that don’t specify a custom touch icon, a thumbnail screenshot of the page is used instead (iOS Devices). Android has a default icon, and some systems fall back to the favicon if it’s available. Touch icons can be added to your web page and is simple as adding some HTML: <link rel=”apple-touch-icon” href=”apple-touch-icon.png”>
iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen (as it does with application icons).
These effects are: Rounded corners, Drop shadow, Reflective Shine
When making your icons you should create a such:
- one that measures 144 × 144 pixels for high-resolution iPad ‘Retina’ displays;
- one that measures 114 × 114 pixels for high-resolution iPhone ‘Retina’ displays;
- one that measures 57 × 57 pixels for everything else.
- for iPad devices without a high-resolution display, a 72 × 72 pixel icon can be used.
As I have first discovered via experimentation no HTML is needed for newer iOS devices. This is because safari will search the website’s root directory 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 × 57 pixels, iOS searches for filenames in the following order:
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-57×57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
That said, all you need to do is create different versions of the icon, use the correct file names and place them in the root path of your website just like a faveicon.ico
To wrap this up all you need is:
- apple-touch-icon-57×57-precomposed.png or apple-touch-icon-57×57.png for non-Retina iPhone and iPod Touch;
- apple-touch-icon-72×72-precomposed.png or apple-touch-icon-72×72.png for the first- and second-generation iPad;
- apple-touch-icon-114×114-precomposed.png or apple-touch-icon-114×114.png for iPhone 4+ (with Retina Display);
- apple-touch-icon-144×144-precomposed.png or apple-touch-icon-144×144.png for iPad 3+ (with Retina Display);
- apple-touch-icon-precomposed.png and apple-touch-icon.png
Add both apple-touch-icon.png and apple-touch-icon-precomposed.png for maximum compatibility.
I hope this helps you
– Jermal