Creating an iPhone Website Icon

Written by , Published On 17th January 2008.
Filed in Articles, Graphics.

With the latest software update to the iPhone, it is now possible to add ‘WebClips’ to your home screen. This is essentially a quick bookmark to a website, complete with an icon. By default, the iPhone will take a tiny screenshot of the site to use as an icon – with a little work however, you can customize the icon used to make it look just as you’d like.

There are two simple steps to create an icon:

  • Create a 57x57px PNG file to use as the icon – pick something bold that well respresents your site
  • Name it ‘apple-touch-icon.png’ and place it in the root HTML folder of your site

The great thing is that the iPhone will automatically alter the WebClip icon to fit the style of the other icons, adding rounded corners and the glossy effect.

To apply the icon a different way, you can insert a <link> element similar to <link rel=”apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.

If you notice a slight delay after clicking the ‘Add to Home Screen’ button on your iPhone it is simply that the icon is being downloaded. Give it a few seconds!

For the official guide, you can have a look at the Apple iPhone Dev Site.

Discussion

  1. Dave says:

    Thanks very much for this post! Very useful, very easy! Wish more sites would take advantage

  2. Dan says:

    Thanks for the INFO!

    Now i just need to make an icon that small!

  3. Jinesh says:

    This is a good piece of info that I would truly like to work on!! Thanks for the details.

  4. Great tip! Thank you. I will be adding iPhone support to our site soon and this is really helpful!

  5. matt says:

    Thanks this was very helpful and easy.

  6. gelen says:

    Great tip. Definately usefull. Thanks a lot to the author.

  7. Jeff says:

    Really great tip! I read about the way but not about the simple way of just putting the png file in the root directory. Much easier! Thx for the great post!

  8. Homar says:

    Thanks! Just what I was looking for.

  9. Don says:

    Must be placed just before the tag. If you place it at the beginning of the head it WON’T work!

  10. leo says:

    Newfasions.com belongs to and managed by COBO TRADE CO.,Ltd, a based company with headquarters at: 28/F, One Kowloon, 1 Wang Yuen Street, Kowloon Bay, 0852, Hong Kong.
    Macbook;
    Newfasions Macbook Air MC505LL/A
    ipad;
    Newfasions 3G MC349LL/A 16GB
    Newfasions MB294LL/A 64GB

  11. leo says:

    Newfasions.com belongs to and managed by, COBO TRADE CO.,Ltd a based company with headquarters at: 28/F, One Kowloon, 1 Wang Yuen Street, Kowloon Bay, 0852, Hong Kong.
    Macbook;
    Newfasions Macbook Air MC505LL/A
    ipad;
    Newfasions 3G MC349LL/A 16GB
    Newfasions MB294LL/A 64GB
    COBO TRADE MB294LL/A 64GB
    iphone4;
    Newfasions MC605B/A
    Newfasions MC603B/A white 16GB

  12. leo says:

    Newfasions.com belongs to and managed by COBO TRADE CO.,Ltd, a based company with headquarters at: 28/F, One Kowloon, 1 Wang Yuen Street, Kowloon Bay, 0852, Hong Kong.
    Macbook;
    Newfasions Macbook Air MC505LL/A
    ipad;
    Newfasions 3G MC349LL/A 16GB
    Newfasions MB294LL/A 64GB
    COBO TRADE MB294LL/A 64GB
    iphone4;
    Newfasions MC605B/A
    Newfasions MC603B/A white 16GB

  13. Laura Hogarth says:

    Cheers for this :)

  14. Cool Icon, I an preparing to make a style for website for viewing on iPhone.Thanks

Leave Your Reply