Crock-Town: favicon for iPhone & iPad

Web peoples:

Remember the exhileration you felt when you figured out how to make your first, cool favicon.ico?

... or your first "optimized for IE/NS 3.0" website?

... or when you locked yourself in the lab, deciphered the DOM, and emerged 2 days later with your first hand-coded DHTML creation?

... when you through 87a to the wind and produced your first animated gif89a?

Well, time marches on, and we've moved far beyond the old, gray "Netscape Now" icons, to a new world of shinier, sparkly buttons... on touch screens. BEHOLD!

How to make a bookmark icon for the iPhone or iPad:
from http://lifeinthefastlane.com/2010/07/the-little-button/

1. Create your icon…

With the advent of the iPod Touch, Apple updated thier devices to allow users to add website links to their home screen. These home screen icons are created by taking a thumbnail screenshot of your current view on that website. Pretty cool, but…boring!

Now Apple has provided web site owners the ability to specify an icon to be used in-place of the screenshot (apple-touch-icon.png). You can also explicity specify which icon should be used when the iPhone’s browser visits your site by specifying a ‘link‘ tag in the <head> portion of your page’s html.

There are lots of websites which help generate a favicon for your website…but my favourite is Flavor Studio Tools and Resources. Note that the size of an iPad Home Screen icon is 72×72 pixels, so you may need to re-size the downloaded images.

This icon is also compatible with the iPhone and iPod Touch. The size of the icons on those displays is 57×57, but you do not have to create an alternate version. Those mobile devices will shrink down your 72×72 icon automatically. (Of Zen and Computing)

2. Upload the icon to your blog/website

Upload the completed icon to your site as a transparent PNG named apple-touch-icon.png .
It is recommended that you place the file in the root public accessible directory…but I didn’t know what that was, so uploaded as a media file and copied the file url to complete the final stage.

3. Add some code