Apple iOS Touch Icons for Web Clips
Web Clip icons and <link rel="apple-touch-icon"/>
A Web Clip is a link to a web page or content from a web page that has been saved to a device along with an icon on the home screen that can be used to display it.
To save a Web Clip, the user touches the "Save / Send" icon in the middle of the navigation bar at the bottom of the Safari screen (left image above) and selects the "Add to Home Screen" option on the "Save / Send" menu (middle image above). Safari creates a .webclip bundle in the /var/mobile/Library/WebClips folder. On the iPhone / iPad / iPod Touch Home Screen it adds an icon (right image above) taken from:
- a
<link rel="apple-touch-icon"/>
meta tag, or - an
apple-touch-icon.png
orapple-touch-icon-precomposed.png
image file in the root document folder, if one exists, or else - a scaled down image of the web site
Safari retrieves the default icon for the web site from the root document directory of the site by searching for files in the following order:
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
The first file that exists in that search order will be used. If the file name does not end with "-precomposed.png", iOS will add an elliptical glossy glow to the top half of the icon.
To override default site-wide Web Clip icons and/or specify icons for higher resolution iOS devices, code the <link rel="apple-touch-icon"/>
meta tag. For example:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"/> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
In these examples, the leading /
in the href
attribute indicates that the icons are located in the document root directory of the web site.