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.
0 TrackBacks
Listed below are links to blogs that reference this entry: Tip: Developer - How Sites Can Implement Custom Icons for Web Clips.
TrackBack URL for this entry: https://swarm.jupitermedia.com/mt-tb.cgi/1185
Leave a comment