Return Home | Skip to Content

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.

iPod Touch knock-off sells for $109

Are you looking to score an iPod Touch for the holidays but finding the $300-$400 price tag a bit hard to stomach?  mp4nation.net is selling the Optimus Touch (how Transformers-sounding is that?) for a mere $109.  So how does this differ from the iPod Touch?

Optimus Touch lacks WiFi, has a touch screen that is stylus-friendly only, has a small memory capacity (2gb or 4gb), and a smaller screen than iPod Touch, to name a few major differences.

It does, however, have a FM tuner, miniSD slot, supports DivX and XviD movies, and a 1.3MP CMOS camera that can also act as a webcam.

Watch the video below.   You can see the build quality is not up to par with Apple standards, but what do you expect for a $100 knock-off that isn’t from Apple?

Page 1 of 11