I just spent a while looking for a way to change the default screen-grap icon for bookmarked web pages using the iPhone. I finally discovered it through google, but thought it would be worth posting here, as Apple seems to have deleted the official instructions page.
I finally found something close at the CartoonBarry blog:
Step 1: Create custom icons that are 57×57 and save them as PNG files. They can be larger, but Apple will scale them for you.
Step 2: Rename the file to apple-touch-icon.png
Step 3: Upload them to your root directory on your server.
STOP – what if you don’t have access to your root directory? Well, you can add a <link> element similar to <link rel=”apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.
Well, this is pretty good but a bit misleading. You can’t follow the instructions and then cut and paste. If you need to create the icon and make it usable, then the code will need to reflect the link and the image source file. For example, this is the code that I inserted into my header:
<link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/>
Notice that the link section and the image source have the same name. If you copy this code and insert it into your header on your template’s index.php file, it should work. This does mean however that you can change the code to remove any mention of Apple (sort of). For example you could use this code:
<link rel=”apple-touch-icon” href=”/medium-favicon.png”/>
And it will work!
This is the icon that I use on Crawl.net.au
Crawl.net.au iPhone icon
If you are trying this out on an iPhone, you will notice that the version of Mac OS X on the iPhone will automatically apply the shiny filter and the rounded corners to the image. You only need to provide a square original image.
One last thing to mention is that the iPhone takes the title of the website as the name of the bookmark. So if your Joomla! website uses a longish slogan on it’s homepage, it will truncate it. I haven’t worked out a way to get around this yet. It would be brilliant if you could force the iPhone to substitute a different title, that would be brilliant!
If anyone knows the secret, spread the word! Although, I doubt it, as even the Apple and Google websites do not seem to do this.
Filed under: Other, Search Engine Optimisation , favicon, icon, iPhone
