Create custom iPhone and iPod Touch icon for webclips

webclip_icon

Before we get started, what’s a webclip?

With the firmware updates to the iPhone and iPod Touch, a new feature was added that allows you to create a shortcut to a webpage on your home screen–that’s a webclip.

Okay, so webclips. If you have a website and someone creates a webclip for your site, by default the icon will just be a thumbnail of your site. But, you are also able to provide an icon that will be used instead.

All you have to do is:

  • Create a 57 x 57 PNG of the thumbnail you want to use.
  • Name the file “apple-touch-icon.png”.
  • Save the icon to the root folder of your website (not the root folder of your server, the root of your web documents).

If you don’t have access to this folder, just add this into the HEAD section of your main web file:

<link rel=”apple-touch-icon” href=”/whatever.jpg”/>

Just replace the “/whatever.jpg” with the path to the image file you want to use and you’re done.

[Via TUAW]

3 Responses to “Create custom iPhone and iPod Touch icon for webclips”

  1. Thanks for the tip. I’m definitely going to try this out.

  2. Worked fantastic. But I don’t suppose you know how to tell the iPhone not to add that annoying highlight?

  3. Nope, looks like you’re stuck with it. Maybe if you jailbreak it you’ll have a way to disable the highlights? Just guessing…I like my iPhone just the way it is. =)

Leave a Reply

You must be logged in to post a comment.