html - Apple touch icon isn't showing up on the home screen

Question

I'm using the following code to get touch icons for mobile devices - it's based on the html5boilerplate/mobile example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/touch/h/apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/img/touch/l/apple-touch-icon.png">
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/img/touch/apple-touch-icon.png">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

But for some reason, the iPhone is still giving me problems for the home screen icon. All I get is that annoying screenshot icon.

I've included the other meta tags here in case they shed some light on why it isn't working. I've tried reordering the tags.

Can anyone think of anything that might stop the icons being used?

I've used html5boilerplate/mobile as a test case - I'm able to browse to their site and add the icon to the home screen on my iPhone (4S iOS5). I've tried copying their code, folder structure, and icons into my own site, but this didn't work.

Any ideas?

Answer 1

I had the same problem. The solution is to remove the password protection on the website.