Design Shack - Web design showcase, CSS tutorials and web standards

Subscribe via RSS RSS (11,962 Readers)


Dedicated Server Hosting Beautiful Premium WordPress Themes & CSS Menus

About

Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way. It is carefully curated and edited by Josh Johnson and David Appleyard.


Part of the Smashing Network

Creating an iPhone Website Icon

Written by David Appleyard, 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.

Tags: , , , , , ,

10 Comments

  1. Dave says:
    February 1, 2008 at 3:24 am

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

  2. Dan says:
    March 11, 2008 at 1:45 pm

    Thanks for the INFO!

    Now i just need to make an icon that small!

  3. Jinesh says:
    April 18, 2008 at 3:48 am

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

  4. Fort Myers Photographer says:
    August 3, 2008 at 7:02 am

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

  5. matt says:
    August 13, 2008 at 9:19 pm

    Thanks this was very helpful and easy.

  6. gelen says:
    October 5, 2008 at 8:09 am

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

  7. Jeff says:
    October 24, 2008 at 6:14 am

    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:
    March 2, 2009 at 5:55 am

    Thanks! Just what I was looking for.

  9. Don says:
    April 7, 2010 at 9:23 am

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

Leave Your Reply