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)


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" />
If no sizes attribute is added it defaults to 57×57.


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:

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:


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.

Further Reading