There are many little details that separate websites that look professional across devices and browsers from those that don’t. The favicon and the apple-touch-icons are one of those small extra details that make all the difference in how your site is perceived by users.
Apple Touch Icons
The browser on touchscreen Apple products (the iPhone, iPod touch, and iPad) offers the option to add a bookmark to a link directly to the home screen alongside the users apps and widgets. If your site doesn’t provide the apple-touch-icon markup, then the icon will just be a screenshot of the webpage. This is generally quite ugly as most websites don’t fit well in a 57px square! However, if you set an apple-touch-icon link to a PNG image, the browser will use that as an icon instead.
There are 4 image sizes that correspond to the 4 different Apple touchscreen product resolutions currently available. These are (in pixels):
- 144×144 (iPad retina)
- 114×114 (iPhone retina)
- 72×72 (iPad)
- 57×57 (iPhone)