Web Icon’s for your iPhone

By: Jamie | On: January 25th, 2008 | In: Apple, Tutorials, Web Design

With the recent 1.1.3 iPhone update, you can now add web clips to your home screen. Here is a nice technique you can implement to make your website’s web clip icon look like a native iPhone application! It’s really easy and looks great.

1. Simply grab your website/company logo and make it a 59px x 59px image, save it as a .png file and stick it in your website images folder (example below).

2. Add this code to your web page ‘head’ section:
<link rel="apple-touch-icon" href="http://www.yourdomain.com/images/youricon.png" />

Web IconTo make the icon resemble native iPhone apps, all you need to do is add a slight gradient to the lower part of the icon. The iPhone will add the top reflection automatically.

That’s it! Now when people add your site to their iPhone home page, it will look really cool.

This entry was posted on Friday, January 25th, 2008 at 1:47 pm and is filed under Apple, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Web Icon’s for your iPhone”

  1. Steven Russo Says:
    June 17th, 2008 at 10:03 am

    Awesome blog! Is anyone here familiar with cookie injections? If so, please hit me up! Thanks!

  2. iphone games music Says:
    July 19th, 2008 at 9:15 pm

    Nice blog, i have added it to my favourites, greetings

  3. mma Says:
    July 21st, 2008 at 7:09 pm

    I find this blog very interesting, i will be here everyday till now. Greetings

Leave a Reply