homepage Welcome to WebmasterWorld Guest from 54.234.0.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Apple Touch Icon is the favicon.ico for the iPhone
apple-touch-icon.png
Clark

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3560399 posted 4:33 am on Jan 29, 2008 (gmt 0)

Heads up. Remember when you were the first on the block with the favicon.ico? Well now you can be first to support something similar for the iPhone.

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.


 

BlobFisk

WebmasterWorld Senior Member blobfisk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3560399 posted 10:16 am on Jan 29, 2008 (gmt 0)

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]

Rosalind

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3560399 posted 10:26 am on Jan 29, 2008 (gmt 0)

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.

vincevincevince

WebmasterWorld Senior Member vincevincevince us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3560399 posted 12:46 pm on Jan 29, 2008 (gmt 0)

Rosalind, there are many 'iphone emulators' out there...

maximillianos

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3560399 posted 1:27 pm on Jan 29, 2008 (gmt 0)

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.

Rosalind

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3560399 posted 2:03 pm on Jan 29, 2008 (gmt 0)

Thanks Vince, I didn't think of searching for that. Although I notice that Apple doesn't approve of such things, for copyright reasons:

[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.

phranque

WebmasterWorld Administrator phranque us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 3560399 posted 2:09 pm on Jan 29, 2008 (gmt 0)

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.

whoisgregg

WebmasterWorld Senior Member whoisgregg us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3560399 posted 2:14 pm on Jan 29, 2008 (gmt 0)

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).

mikedee

5+ Year Member



 
Msg#: 3560399 posted 2:32 pm on Jan 29, 2008 (gmt 0)

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.

balam

10+ Year Member



 
Msg#: 3560399 posted 8:27 pm on Jan 29, 2008 (gmt 0)

<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?

whoisgregg

WebmasterWorld Senior Member whoisgregg us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3560399 posted 9:33 pm on Jan 29, 2008 (gmt 0)

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.

mikedee

5+ Year Member



 
Msg#: 3560399 posted 1:38 am on Jan 30, 2008 (gmt 0)

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

"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.

balam

10+ Year Member



 
Msg#: 3560399 posted 2:24 am on Jan 30, 2008 (gmt 0)

> 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!

maximillianos

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3560399 posted 12:58 pm on Jan 30, 2008 (gmt 0)

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!

microcars

10+ Year Member



 
Msg#: 3560399 posted 3:01 pm on Jan 30, 2008 (gmt 0)

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.

levo

5+ Year Member



 
Msg#: 3560399 posted 1:17 am on Jan 31, 2008 (gmt 0)

I have tested an icon with dots and at 57x57 it got distorted..

At 60x60 it shows the dots correctly. Could someone confirm this?

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3560399 posted 1:51 pm on Feb 1, 2008 (gmt 0)

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?)

whoisgregg

WebmasterWorld Senior Member whoisgregg us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3560399 posted 2:44 pm on Feb 1, 2008 (gmt 0)

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).

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3560399 posted 6:09 pm on Feb 1, 2008 (gmt 0)

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved