Apple’s iOS enables users to add web pages to their iPhone or iPad home screen. An icon will be added that has the same look and feel as the other apps on the iPhone home screen. When you tap the icon, Safari will open the web page.
By default, iOS will show a Safari kind of logo. However, you can also add your own custom icon to your website. An example of a website that has a custom iOS icon is The Verge. You can see their custom iOS icon in the image below.
How to add an iOS icon to your WordPress website
To make sure that your icon shows on every iPhone, iPad and iPod Touch, we’ll need to upload multiple versions of the same icon. This has to do with the fact that we need to upload extra large ones for Apple’s retina displays (for iPhone 5 and higher).
First we’ll need to create three images. Open your logo or icon in Adobe Photoshop and save it in the following four formats:
- 114 x 114 pixels – iPhone (Retina display)
- 57 x 57 pixels – iPhone (Non Retina)
- 144 x 144 pixels – iPad (Retina)
- 72 x 72 pixels – iPad (Non Retina)
Make sure to save these images as a PNG for the best result. Next, upload them to your website (either via FTP or the WordPress admin).
Next, we’ll need to add the following code to the <head> section of your WordPress website. You can do this by adding the code in the header.php file of your (child) theme, or by using a plugin. Make sure to replace the href with your own image’s URLs.
<link rel="apple-touch-icon" sizes="57x57" href="my-apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="my-apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="my-apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="my-apple-icon-144x144.png" />
Using a plugin
Of course, you can also use a plugin to add the iOS icons to your website. For instance, the Add to home screen WP plugin will do the same as shown above. It will also allow you to add a floating “balloon” to your website, that will invite your visitors to add your website to their home screen (see image).