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 put the same page and icon on two other sites and it worked perfectly, so I think maybe it might be because the original two test servers I was working on were password protected - although obviously I'd entered the credentials to browse the page, so not entirely sure why that would be a problem. However, the results appear to suggest this was the case.

Answer 2

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

Answer 3

In the Apple Safari Web Content Guide they suggest putting the icons in the "root document folder".

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png.

I tried this and it wouldn't work until I finally moved the icons to an 'img' folder and linked to them there.

However, I suspect the reason the html5boilerplate icon worked and yours didn't was because you are using a virtual directory such as:

http://localhost/myvirtualdirectory/apple-touch-icon.png

while the default behavior of iOS is to look at the root domain even when you are hosting out of the virtual directory:

http://localhost/apple-touch-icon.png

Hopefully others could verify this.

Answer 4

I had the very same problem, and the source of the problem is that I had an htaccess file with password protection for my site, so the webclip icon will not work, to solve this problem and still have password protection you need to add this code:

SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

That way you have full access to http://www.example.com/apple-touch-icon.png without needing any password.

If you are still having problems here is an example with the full htaccess file:

AuthUserFile /home/mysite/.htpasswds/.htpasswd
AuthType Basic
AuthName "Password Protected"
Require valid-user
SetEnvIf Request_URI "(/apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

That should fix the problem.

Cheers!!

Answer 5

I had the same problem when my icons were in my ui/img folder, even though my site wasn't password protected. After moving them to my root folder (and clearing the cache) it started working.

Answer 6

Placing an icon on the external image hosting and adding url as value of "href" worked for me as charm.

Answer 7

I couldn't get this to work until I went on my iPhone under Settings->Safari and then 'Clear History and Website Data' and then try and add it to my homepage.