Scott Johnson

iPhone WebClip Bookmark Icons

After downloading firmware 1.1.3 for the iPhone today, I quickly noticed that Google Mobile and Mowser, when added to the home screen, displayed custom icons, and I just had to know how they did it. So I dug around for a bit until I figured out how it works.

From the iPhone Dev Center:

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 57x57 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.