Forum Moderators: open
Create a file called apple-touch-icon.png and instead of a screenshot, you can specify the image you want.
Source [developer.apple.com]
Snippet:
iPhone and iPod touch allow a user to save a WebClip bookmark to your site on their Home Screen.To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.
To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.
The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.
Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.
This is a great read for people who are thinking about making their websites accessible to iPhone users, including designing for fingers instead of a mouse and a fixed viewport.
[edited by: BlobFisk at 11:02 am (utc) on Jan. 29, 2008]
Otherwise, I don't see the point in bothering. It's a proprietary format that not many people are using.
Don't get me wrong, I love my iphone and prefer to use it to browse the web over my real computer (more fun!), but I don't want this to become a trend where we start seeing sites with 50 lines of code in the header that specify icons for 50 different phones/mobile devices, etc.
[reghardware.co.uk...]
It would be good if they developed a utility of their own for developers to use in testing. But I suppose they just want us all to buy the phone itself, so maybe they won't.
Though I don't like the idea of putting a line of code on my pages just for the iphone.
if you have a dynamic site you could probably serve this line according to the user agent.
I have done a test on my site and everything went well.
For the benefit of people who do not have an iphone, it changes the icon by rounding the corners and adding a semi-circular shadow to the bottom half of the icon (see any screenshot to see). Do not put anything near the corners or edges because they get cropped off.
The iphone emulators I have seen are mainly iphone browser emulators and do not replicate the home screen well. I have not seen, but it is probably hard to test things like the phones auto recognition of phone numbers (which is fairly basic).
It would be best if they had used favicon rather than inventing their own metatag, the .ico format is a container for many different resolution icons. Microsoft has upped the max size to 256x256 as a compressed png. Maybe we will just have to wait for this...
On my site I am already getting 0.2% of users from an iphone, which sounds virtually nothing but it is much more than any other mobile browser and is second only to PS3 in non-PC platforms. I know Amazon has a iphone specific site and I am sure there are many others. I have made at least 3 orders online using my phone and use it regularly for quick information.
P.S. The icon does not seem to update - unless it does it over time. It would be nice if it updated each time the site was visited.
As I read it, you don't have to add anything in the <head>, unless you want a different icon served for a specific page (using <link>), rather than the "global" (that is, "site-wide") icon.
If I may quote the quoted...
To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.
That sounds no different than the current SOP for use of "favicon.ico."
To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.
The section I emphasised, taken at face value, seems to imply that the <link> element is only required for a page-specific icon and not to make any iPhone icon available.
I checked my logs for the last three months - no sign of a 404 for an iPhone icon request. Perhaps an iPhone owner could do a quick test for us? Is the <link> element required for a "global" icon? In the absence of the <link> element, does Safari request the icon from root?
logs for the last three months - no sign of a 404 for an iPhone icon request
My understanding is this feature is only used when you add a site as a bookmark to your home page. This feature only came about with the last iPhone update, available starting January 8th, 2008.
So, it's not an automatic request like favicon.ico that occurs on any site visit, it only occurs for a home page bookmark. Probably a rarer user action than typical bookmarking.
The user agent is different too - it is reported as
"CFNetwork/152.4"
instead of
"Mozilla/5.0 (iPhone;U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3"
Wikipedia, BBC and Amazon all have one of them.
> The user agent is different too - it is reported as "CFNetwork/152.4"
Ahhh...! I've had the "CFNetwork" UA banned for a couple of years now. Sorry iphone, no icon for you!
Just a note on my implementation, you do NOT need to use any code in the header of your page. Simply create your icon and name it "apple-touch-icon.png" and place it in your root directory. That is all that is necessary to make it work!
then you have something new to show them. Clients like new things.
Especially new things that they can then "show off" to someone else on their iPhone.
At 60x60 it shows the dots correctly. Could someone confirm this?
maximillianos: I've added a few of this fav-icons to my iphone homepage. It works pretty well without customizing it...
What does the bookmarked icon look like if you don't customise it? ie. don't include an apple-touch-icon.png file? (Is it like a mini-screenshot of the page?)
Is it like a mini-screenshot of the page?
Yes, however it's actually a screenshot of the portion of the page the user was zoomed in on at the time they add it. In other words, if you are zoomed out, the button looks like the entire page, or you can zoom in to the logo (for example) and then set the bookmark and the icon is the logo (plus whatever parts of the page were still visible around the logo).
Yes, however it's actually a screenshot of the portion of the page the user was zoomed in on....
Ah OK, that's pretty neat. So if you do provide an apple-touch-icon.png then it takes away this 'feature'? You certainly have to make sure it's better than any mini-screenshot. The difference with the favicon is that if you don't have a favicon you don't get anything!
