Considerations for Website Home Screen Icons for Touch Devices

Safari for iPad’s ‘Add to Home Screen’ Feature
Here are a few considerations for when touch device users decide to create a shortcut to your site on their home screen:
1. Icon Sizes to Support
If you are going to just have 1 image defined for your website, I would recommend using 152×152 png since this is the Retina iPad Home Screen Icon size. Android & Apple will resize the image file as needed for other devices as needed, but this way you will have optimized your image for the highest resolution. And yes, Android devices will use the apple-touch-icon file to use for Chrome/Internet’s ‘Add to Homescreen’ functionality.
However, if you (or more likely your design team) want more pixel perfect control over these icons I would recommend the following 6 Sizes:
      1. 196×196 for high resolution devices
      2. 128×128 for lower resolution devices
      1. 60×60 for non-Retina iPhone / iPods
      2. 120×120 for Retina iPhone / iPods
      3. 76×76 for non-Retina iPads
      4. 152×152 for Retina iPad
*Note that you may find listings for slightly different sizes, e.g. 57×57 instead of 60×60. These sizes were changed in iOS 7 and the 57×57 is the old iOS 6 size. For example, the Knowledge Graph box at the top of Google’s search results for “apple touch icon sizes” cites the old icon sizes (and yes, I submitted Feedback to Google to help them identify this error).
2. Website Icon vs App Icon
If you also have an app, make sure that the apple-touch-icon and the app icon you use are somehow differentiated to reduce user confusion on the home screen. Consider reversing the color scheme and/or including “.com” in the apple-touch-icon for clarity. Other ideas? Please share in a comment below!
Further Recommended Reading: