iDevice 'add to homescreen' icon

[lilfellabob]

Hey guys,

So I have a mobile website that I have made compatible with iPhones using

<meta name="apple-mobile-web-app-capable" content="yes" />

and I have tried to get it to have an icon (on the device's springboard) other than the miniature screenshot of the page using

<link rel="apple-touch-icon" href="http://mywebsite.com/content/images/iphone_icon.png"/>

with no success. I have also tried these variations

<link rel="apple-touch-icon" href="http://www.mywebsite.com/content/images/iphone_icon.png"/>

<link rel="apple-touch-icon" href="../content/images/iphone_icon.png"/>

<link rel="apple-touch-icon" href="/iphone_icon.png"/>

but none of them have any effect - it still puts the icon as a screenshot of the page. My icon is 57*57 pixels and is in png format. I have tested to make sure the url is valid - I don't get a 404 error..

The page that I'm trying to do this off is m.mywebsite.com which is associated with mywebsite.com/mobile - could this be causing some sort of issue for me?

Anyone have any ideas as to what I'm doing wrong?

Cheers,

Josh

[absolutmgd13]

im not really any good with iOS stuff being that im not an apple fan, but try replacing

apple-touch-icon with apple-touch-icon-precomposed ?

also, if for whatever reason your image directory is protected or secured this wont work. you'll have to move it to an unsecure location.

[lilfellabob]

Thanks for the reply! I think the precomposed has indeed fixed it.
Apple says:
'If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.'
So it shouldn't really matter I wouldn't have though but it turns out I don't want the effects anyway.
Also the icon only shows up after the web app has been loaded from the homescreen.. Maybe it doesn't ready that code initially?