Web Clips provide an icon that will appear on iOS 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 Web Clip.
To add Web Clips in EverWeb is very easy.
First you need to actually create your web clip icon. Web clip 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.
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 web clip image should be saved in PNG format.
Next, save your default web clip 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.