How to Add Web Clips & Touch Icons in EverWeb for iPhones/iPads

3
4908

Web Clips (or Touch Icons) provide an icon that will appear on iOS and Android devices when a user chooses to save your website to their Home Screen.

You can try this yourself by opening a web page on your iPhone and press the Share button (middle button at the bottom of Safari on iOS 7). Then select the ‘Add to Home Screen’ button.

An icon will appear on your Home Screen that gives you quick access to your web site. If you want to provide your own icon for your web site you can do so with a Touch Icons.

To add Touch Icons to your website in EverWeb is very easy.

First you need to actually create your touch icon image file. Touch icons should actually be in 4 different sizes for iPhones, Retina iPhones, iPads and Retina iPads. However, if you want to take a shortcut make just an icon that is 120 x 120 pixels. This is the size for Retina iPhones and will be resized by the devices.

The optimal sizes for all four devices are as follows;

iPhone: 60×60 pixels
iPhone Retina: 120×120 pixels
iPad: 76×76 pixels
iPad Retina: 152×152 pixels

The touch icon image should be saved in PNG format.

Next, save your default touch icon image using the file name;

apple-touch-icon.png

If you are creating images for all 4 devices you can name them as follows;
apple-touch-icon.png
apple-touch-icon-iphone-retina.png
apple-touch-icon-ipad.png
apple-touch-icon-ipad-retina.png

Next, drag all your PNG images into the assets list in EverWeb.

Then, select your web page name in the upper left hand corner to bring up the publishing settings. Where it says Head Code, paste the following;

If you have specified all 4 icons than ADD the following lines to the Head Code field;

<link rel="apple-touch-icon" sizes="76x76" href="{!-ASSETSPATH-!}External%20Files/apple-touch-icon-iphone-retina.png">

<link rel=”apple-touch-icon” sizes=”120×120″ href=”{!-ASSETSPATH-!}External%20Files/apple-touch-icon-ipad.png”>

<link rel=”apple-touch-icon” sizes=”152×152″ href=”{!-ASSETSPATH-!}External%20Files/apple-touch-icon-ipad-retina.png”>

And that’s it!

You can load up your site on your phone and try it out.

3 comments

  1. Alex 30 January, 2019 at 15:31 Reply

    The href=”{!-ASSETSPATH-!}External%20Files/apple-touch-icon-ipad.png” part is incorrect.
    The links should in the following format:
    href=”PATH” where PATH is what you get when you go to the Assets tab, control+click the .png file and select “Copy relative file path”

    In my case, the correct code was a follows:

    There is also inconsistency in sizes as well.
    The guide says:
    >iPad: 76×76 pixels
    but

    Would that be 76 or 120?

    The guide needs to have all the latest touch icons sizes included, the ways to determine PATH in EverWeb (it’s Assets > control+click asset > Copy relative path), and Android icon format.

Leave a reply

Facebook
Twitter
YouTube