How do I create an iPhone or iPod Touch WebClip icon for my website?

How do I create an iPhone or iPod Touch WebClip icon for my website?

Apple's latest feature addition to the iPhone and iPod Touch allows users to create webclip icons on their home screen which link directly to web sites. When clicking on the webclip icon, Safari loads and heads directly to the website the icon links to.

In most cases, the icon that appears on the home screen is a picture of the website it links to. However, in some cases, the icon is something unique and is not simply a mini picture of the website. Many webmasters have been asking how to make a custom icon for their web site.

Here's how:

Create the icon you'd like to display on iPhone or iPod touch homescreens for your website. Save this file as a .PNG and place it in your web site's root/main directory and name it apple-touch-icon.png.

The iPhone or iPod touch will automatically apply the glassy style to the icon to make it look like a typical Apple touch icon.

Also, if you want custom icons for individual web pages you can override the site-wide icon with a custom PNG by placing the following tag within the <head> section of your website:

<link rel="apple-touch-icon" href="/customIcon.png"/>.

Comments