iPhone home screen web icon

Question

After reading lots of different articles, I believe that this is the code that you are supposed to include in the header to change the home screen icon:

 <link rel="apple-touch-icon" href="apple-touch-icon.png" />
 <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
 <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
 <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />

The one without any size specified is 150x150. I have uploaded all these pngs in the root directory however when I add my website to the home screen the phone/iPad still use a screen shot of the website and none of the pngs.

Any suggestions?

Alex

Answer 1

I think you might have to add a slash to the href for the image:

 <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />

This will make sure that you are directing the client's browser to the root directory.

Also, make sure that you use a supported image size. I don't think the iPhone will display it if this is not specified. This link might help: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconMatrix.html

Also, double check that the icon is in the root directory.

Good Luck! Hope this helps!