Creating & applying Touch Icons

[Egg Bramhill]

Recently it was asked how to create 'Touch Icons' for use within Apple & Android mobiles/tablets.

I'd never used these before so after some searching of the web here's what I've come up with:

Create a square icon using Xara

Export it as a png. (I don't think Alpha is of any use)

Import the png into icongen.com (or similar online Touch Icon generators)

Save the resultant zip folder where required and unzip it, naming the folder 'icons' or similar

Using an ftp program like Filezilla upload the folder, 'icons', one level below your website folder

Return to the icongen.com page and copy the supplied code

Edit the code to the correct path, in my example adding 'icons/' to the path

Copy this code

Open the Xara website. Web Properties / Website / HTML Code HEAD and paste in this code.

Publish

Now anyone bookmarking via 'Add to Home Screen' on a mobile or tablet will be served the touch icon.

I would also say that to bear in mind that these icons, although square, are rendered as rounded squares on mobiles / tablets, so keep the corners clear of content.

Here's a rambling video.