Tom Tom - 4 months ago 8
HTML Question

Why won't this apple-touch-icon work?

I have the following code in my website:

<link rel="apple-touch-icon" href="http://website.com/images/apple-touch-icon.png" />


When I view the source in Firefox and click the href attribute the icon shows (so its not a 404 error).

When the code is added to a page like
http://website.com/mobile/index.php
or
http://website.com/mobile/page.php
and the page is added to an iPhone homescreen the icon works fine, but when the page url is like
http://website.com/page
or
http://website.com/index
the icon doesn't show up.

No errors appear in the "website debug console" provided in Safari options and I've tried clearing the cache and cookies.

Also I use the tag
<base href="http://website.com/mobile/" />
website, which shows up on both
http://website.com/mobile/index.php
and
http://website.com/index
. But i can't see how that would effect it since the apple-touch-icon uses a full url.

Answer

Try using a relative URL:

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />

It should go to your base directory and find the icon in /images.