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.
Last edited by Egg Bramhill; 14 February 2016 at 10:57 PM.
Sunshine Coast BC, Canada. In a beautiful part of BC's temperate rainforest
Posts
9,864
Re: Creating & applying Touch Icons
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!
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!
If someone tried to make me dig my own grave I would say No.
They're going to kill me anyway and I'd love to die the way I lived:
Avoiding Manual Labour.
Bookmarks