Jan 16, 2008
How to create a custom iPhone or iPod Touch WebClip bookmark icon

Now that the iPhone and iPod Touch allow a user to save a WebClip bookmark to your site on their Home Screen, most web developers are wondering, “How do I customize this so it doesn’t look so horrible?” 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” which appears to the left of your URL in your web browser.

To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/> within the <head> element of the page.

<head>
    <title>chrisTHIS!</title>
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
</head>

The bookmark icon dimensions should be 57×57 pixels. If the icon is a different size it will be scaled and cropped to fit. My examples are shown to the right. Design tip: leave space around your artwork since Apple crops the edges to make the icon round.

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

Note: I have noticed that the <head> element is not needed for this to work. Just put the .png file in your root folder! Perhaps this isn’t needed if you use the default “apple-touch-icon.png” file name in the root folder? I went ahead and did it anyway, just to be on the safe side.

No Replies to "How to create a custom iPhone or iPod Touch WebClip bookmark icon"

    Leave a Reply