I still remember my first days on internet, The first website i saw was.. ya it msn.com. Since I am a windows user, I will get msn first on my desktop :D and I started scrolling the web page, but that time design never inspired me, even the news, but i liked their color schemes, next thing i noticed was the small icon before the title of the webpage, a bright butterfly, the MSN logo ! after several months I came to know that they are called Favicons !

After the launch of Apple iPhone, with the introduction of 1.1.3 firmware Apple Introduced a new type of graphics, called WebClip Icons. By default iPhone/iPodTouch will use the screen shot of the website as WebClip Icon, but we can customize them too !

For that:

  • Create a 57×57 PNG.
  • Name it “apple-touch-icon.png”
  • Place it in the root folder of your website. (Not the root of your server, the root of your web documents.)

You have done it !, Ya iPhone will automatically take that icon and place it over the webclip for you.

<head>
<title>iHelloWorld</title>
<link rel="apple-touch-icon" href="/whatever.jpg"/>
</head>

In case, if you are using a Graphics with some other name in some other locations, you can link that icone just like we does for the favicons. You may place a similar code given below in the head of your design. No problem if your icon graphics is a bit larger, it will be automatically scaled.