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?