Thursday 7 April 2011

Broken Apple Touch Icon Images

iPhone Touch Icon LINK tag doesn't work

I recently created an iPhone friendly webpage so that I could access certain stats from one of my websites on my iPhone .

The page was in a subfolder off the main website which was only half related to the stats I wanted to show. Therefore when I created the icon I wanted to use for the Home Screen I used a LINK element to point to the URI of the image I wanted to use so that the main site could show it's own image if it ever needed to.

So I created an icon and referenced in my page like so many examples on the web tell you to:

<link ref="apple-touch-icon" sizes="57x57" href="http://www.somewbesite.com/mysubdomain/apple-touch-icon.png">

However when I tried to add my web page to the Home Screen the icon didn't show and instead iPhone created it's own icon using a screenshot of the page in question.

At first I thought it might just take a little time to kick in but even two months after creation the icon was still the screenshot image and not the icon I had created.

The .PNG file was not corrupt and I tried numerous different locations, images and attribute settings to no avail.

However today I just gave up and placed the image in question into the root of the main site e.g

http://www.somewbesite.com/apple-touch-icon.png

Then low and behold the icon immediately showed up on my Home Screen!

What is the point of the LINK element if you cannot point to locations apart from the root of the site?

Surely Apples own iPhone technology is capable of looking for it's own touch screen image tags?

Am I going crazy or is something amiss?

1 comment:

Anonymous said...

hey, i have the same problem, but nothing work! xD