Apple: Web Clip Bookmark Icon

iPhone Web Clip Icon has been widely publicized, so there’s nothing really new here. This post basically is for my personal reference.

Apple.com iPhone Web Clip Icon

http://developer.apple.com/iphone/devcenter/designingcontent.html

Create a Web Clip Bookmark Icon

iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen.

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

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

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

Apple recommends the size of the icon as 57×57 pixels, but as we all can see, Apple’s own Web Clip Bookmark Icon is 129×129 pixels.