34

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?

FelixSFD
  • 6,052
  • 10
  • 43
  • 117
gpr
  • 959
  • 1
  • 10
  • 23
  • 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. – Sparky Oct 25 '11 at 06:25
  • 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. – gpr Oct 25 '11 at 06:31
  • 1
    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 – Jason G Mar 04 '15 at 19:08
  • Check this answer: https://stackoverflow.com/questions/33777966/add-to-home-screen-icon-not-populating-on-ipad-with-ios-9-1-on-safari-browser – Mario Nezmah Mar 23 '21 at 16:00

7 Answers7

77

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

Ccx
  • 779
  • 1
  • 5
  • 3
  • 14
    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. – CBono Apr 19 '12 at 12:37
  • 1
    I had this problem too. Just moved it to a part of the site that wasn't protected. Thanks for the tip! – grey Jun 04 '12 at 06:49
  • 1
    Good to know as I was running into the same issue. – hcker2000 Aug 30 '12 at 16:00
  • 2
    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? – jagershark Sep 12 '13 at 12:24
  • 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! – KFox112 Jul 10 '17 at 16:45
14

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.

gpr
  • 959
  • 1
  • 10
  • 23
8

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

innovaciones
  • 101
  • 1
  • 4
6

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.

Chad Pavliska
  • 1,233
  • 12
  • 17
  • 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. – gpr Jul 14 '12 at 06:45
1

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.

patad
  • 9,364
  • 11
  • 38
  • 44
1

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

Artem Mishukov
  • 11
  • 3
-1

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.

jrel
  • 187
  • 1
  • 11