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?

Whereupon

If you've already duplicated the html5boilerplate/mobile code & images as a test case and it works, then why have you not already narrowed it down by replacing it line-by-line and image-by-image? Seems straight-forward enough. – Nodose

Sorry, maybe I wasn't clear. I've browsed to the boilerplate site on my phone and successfully added their icon to my home screen. I've tried copying their code, folder structure, and icons into my own site and it doesn't work. - I'll edit my question to make this clear. – Whereupon

I don't have password protection and they are in the root folder, but they still do not show up for the home-screen icon – Headrick

Check this answer: #33778466 – Menke

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.

Whereupon

Answer 2

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

Cobnut

It's worth noting you don't need to remove password protection (or authentication in general, i.e. Windows Auth) for the entire site. Making a subdirectory anonymous, like an "images" directory, is sufficient. Put your icons there and then use a link element to point to them. – Triciatrick

I had this problem too. Just moved it to a part of the site that wasn't protected. Thanks for the tip! – Appraise

Good to know as I was running into the same issue. – Nevarez

Can someone elaborate on this please? By password protection do ye mean via .htaccess? I'm having this issue but I have not password protected my website? – Redbug

Our test environments are behind a reverse proxy. After reading this, I stood up a temporary public site (no reverse proxy auth) and my icons worked in that environment. :) Thanks! – Blount

Answer 3

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!!

Walloping

Answer 4

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.

Telford

No, in this case I wasn't using localhost; I had published the site to a publicly accessible test server so I could test the site on mobile devices that wouldn't be able to access my localhost. As per my previous response (and Ccx's), making the folder containing the icons public fixed the problem. – Whereupon

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.

Adamec

Answer 6

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

Verada

Or using the full path instead of a relative path worked for me – Providenciaprovident

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.

Blimey

So this didn't fix the problem but it did close out all my open tabs so BE WARNED! – Coping