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.

[angelize]

Thanks for this Egg, I for one will find it quite useful. I have been wanting to figure out a way do do this for my little online publication and was planning on doing a search for just this info!

[Egg Bramhill]

Cheers Frances. I'm not a lover of mobile browsing and had never worked out how to make quick bookmarks but these Touch Icons save a lot of typing on miniscule keypads!

[Big Frank]

i like your rambling videos

[CQDX]

Thank you very much for the effort you put into a very informative presentation!

[John Warner]

Thanks Ed, hope many more find this useful.