iOS bookmark icon
When you bookmark a website on an iOS device, you can add the bookmark to the home screen and list it next to your apps.
By default, a screenshot of your website is used as the icon, but you can specify an icon to use instead.
Icon sizes
When making an icon you need to make it at the following sizes:
| Size in pixels | Device type |
|---|---|
| 57×57 | iPhone |
| 72×72 | iPad |
| 114×114 | iPhone (retina) |
| 144×144 | iPad (retina) |
The HTML
Add the following HTML to the head section of your page to set the icons:
<link rel="apple-touch-icon" sizes="144x144" href="ipad-retina.png" />
<link rel="apple-touch-icon" sizes="114x114" href="iphone-retina.png" />
<link rel="apple-touch-icon" sizes="72x72" href="ipad.png" />
<link rel="apple-touch-icon" href="iphone.png" />sizes attribute is added it defaults to 57×57.No HTML
Instead of specifying icons on every page, you can instead give the icons set names and Safari will automatically include them. Add the following images into the root directory of your website:
- apple-touch-icon-57×57.png
- apple-touch-icon-72×72.png
- apple-touch-icon-114×114.png
- apple-touch-icon-144×144.png
Safari will now automatically include the correct icon for the device.
Icon notes
When you add your icon to the home screen of a device the icon is rounded, and a highlight is added. Any transparent areas are coloured black.
Removing effects
If you do not want iOS to add any effects to your icons add the keyword precomposed to the HTML:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ipad-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ipad.png" />
<link rel="apple-touch-icon-precomposed" href="iphone.png" />This also applies to the default names for the icons:
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-72×72-precomposed.png
- apple-touch-icon-114×114-precomposed.png
- apple-touch-icon-144×144-precomposed.png
WordPress
To add these icons to a WordPress site, either include the HTML into the header.php theme file, or upload icons with the predefined names into the website root directory.