Emailing "Tip: Developer - How Sites Can Implement Custom Icons for Web Clips"


Email this post to:
Your email address:
Your message(optional):
 

With the advent of Web Clips, iPhone and iPod touch users can now save thumbnails or icons to their devices' Home Screens that'll lead them to specific locations on a Web site. For the most part, these bookmark icons are generated on the fly. However, Apple does offer site managers and developers a way to control how these thumbnails look to iPhone and iPod touch users. All you need to do is follow a few simple steps outlined at Apple's iPhone Dev Center.

Here they are:

To specify a bookmark icon for all pages of a website, 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 webpage, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

To specify an icon for a single webpage, or replace the website icon with a webpage-specific icon, add a link element to the webpage as in:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

In the above example, replace custom_icon.png with your icon filename.

The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari on iPhone will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod touch application.