favicon for iPad and iPhone!

Web peoples:

Remember the exhilaration 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 their 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 explicitly specify which icon should be used when the iPhone’s browser visits your site by specifying a ‘link‘ tag in the 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

• To allow the iPhone/iPod Touch/iPad to know where to find you icon you need to add the following tag code in the section of your HTML header:

link href="http://www.website.com/apple-touch-icon.png" rel="apple-touch-icon"

(except you need the <> and the closing link tag- having trouble encoding for blogger)

• Change the url value of the href attribute to reflect the location of your site’s icon and change webiste.com to your own domain name.

from:
http://lifeinthefastlane.com/2010/07/the-little-button/

-Crockett Dunn
Owner CDLLC