Welcome to WebmasterWorld Guest from 54.160.163.163

Forum Moderators: incrediBILL

Message Too Old, No Replies

Apple Touch Icon is the favicon.ico for the iPhone

apple-touch-icon.png

     

Clark

4:33 am on Jan 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

10:16 am on Jan 29, 2008 (gmt 0)

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



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

10:26 am on Jan 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

12:46 pm on Jan 29, 2008 (gmt 0)

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



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

maximillianos

1:27 pm on Jan 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:03 pm on Jan 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

2:09 pm on Jan 29, 2008 (gmt 0)

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



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

2:14 pm on Jan 29, 2008 (gmt 0)

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



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

2:32 pm on Jan 29, 2008 (gmt 0)

5+ Year Member



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

8:27 pm on Jan 29, 2008 (gmt 0)

10+ Year Member



<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

9:33 pm on Jan 29, 2008 (gmt 0)

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



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

1:38 am on Jan 30, 2008 (gmt 0)

5+ Year Member



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

2:24 am on Jan 30, 2008 (gmt 0)

10+ Year Member



> 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

12:58 pm on Jan 30, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

3:01 pm on Jan 30, 2008 (gmt 0)

10+ Year Member



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

1:17 am on Jan 31, 2008 (gmt 0)

10+ Year Member



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

1:51 pm on Feb 1, 2008 (gmt 0)

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



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

2:44 pm on Feb 1, 2008 (gmt 0)

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



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

6:09 pm on Feb 1, 2008 (gmt 0)

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



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month