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.

Discover more from Chris Duke

Subscribe to get the latest posts sent to your email.

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

    Leave a Reply