I am writing an html5 game, and trying to get an apple touch icon to work. I am testing on a non-retina iPhone 4S running ios5. The first part of my html file is:
<head>
<title>My Game</title>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"/>
I am also using a script to prompt users to add the touch icon; this script shows a preview of the touch icon, and it finds the icon with no problem. Also, the icon is public, not password-protected.
When I add the shortcut to my home screen, I get the simple screenshot icon. I have tried clearing my history and cache. Am I doing something wrong? Are those no-cache meta tags interfering with the icon? (They are there so I don’t have to worry about caching issues while developing.)
The issue came down to the fact that my hosting provider does not allow hotlinking of images. So I set up an account at imgur.com, hosted the touch icon there, and it works. I was happy to see that an externally-hosted touch icon works.