iPhone Specific Favicon

February 5 2009, 12:49am

Earlier this week, Google released a mobile version of Gmail Tasks which could be accessed on the iPhone/iPod touch or an Android device as its internet browser is also WebKit based. I thought it was great that Google allowed us to manage our tasklist previously only accessible through Gmail or a Google Gadget on the go now - but was pleasantly surprised at the attention to detail when you added the site to your Home screen on the iPhone:

How did Google specify this iPhone specific icon?

Getting your site to have this “iPhone specific favicon” was just as simple as applying a regular favicon. To do so, just insert a tag like so in the <head> section of your markup:

<link rel=“apple-touch-icon” href=“PATH_TO_ICON_HERE” />

Obviously, just replace “PATH_TO_ICON_HERE” with an image path and you’re all set! To keep things to spec, be sure to design your icon in a 57×57 pixel canvas and export it to PNG format when finished. If you’d like a sample to work with, why not check out the tasks icon Google uses? Related PostJailbreaking & Unlocking 1st Gen iPhone on 2.0.2Rogers Is FINALLY Bringing the iPhone to CanadaRumor: iPhone Coming to Canada Jan/Feb 2008iPhone Web Concept KitiPhone Rate Plans Revealed. What’s in Store for Canada?