How to Add Web Clips & Touch Icons in EverWeb for iPhones/iPads
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.
Where is the code that we would include to the head tag?
It’s there now.
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.