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

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


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.


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.