Excellent find Clark - thanks!
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]
I don't have an I-phone, and I don't know anyone who does. Is there any way of previewing how this "glassy overlay" will make my icon look? Is it part of the Safari browser, or just unique to this device?
Otherwise, I don't see the point in bothering. It's a proprietary format that not many people are using.
Rosalind, there are many 'iphone emulators' out there...
I've added a few of this fav-icons to my iphone homepage. It works pretty well without customizing it, but I can see the branding advantage to customize it. Though I don't like the idea of putting a line of code on my pages just for the iphone.
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.
Thanks Vince, I didn't think of searching for that. Although I notice that Apple doesn't approve of such things, for copyright reasons:
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.
Well, Apple sold 3.7 million iPhones last year, so that's a pretty hefty niche to cater too. Particularly when you consider the demographic of people who can shell out that kind of cash for a phone (either corporate or above average disposable income).
Thanks - This is exactly what I wanted :)
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.
<paraphrase>I'm tired of stuffing my <head> with crap - my eyes are turning brown!</paraphrase>
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.
I have just checked and it does request the png if there is no metatag on the page.
The user agent is different too - it is reported as
"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.
> no sign of a 404 for an iPhone icon request
> 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!
I just loaded and tested my icon. Looks great! Especially since I'm on my iPhone all the time, now I get to see my cool little icon. Granted I'm probably the only one who will ever see it... but who knows. I may surprise a user someday... ;-)
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!
I should also note that if you have a client that also has an iPhone this is a nice "value-added" touch for their site that does not take much time to whip up.
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.
I have tested an icon with dots and at 57x57 it got distorted..
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!