You know when you add a website to your favourites (bookmark) for some websites there will display a logo icon in the address bar and in the favourites listing. These icons are called favicons and many websites add them to compliment their brand identity.

So now some people are using iphones to check out websites and they can add favourite webpages to bookmarks and to their iphone home screen. So what doe that icon look like?

Adding a webpage to home screen

1. Use Safari to go to your website of choice. (I am going to use as example my mates website at Evolve Design. Evolve Design are an awesome graphic design studio in Perth, Australia. Check them out if you want some super smooth designs. Their website is currently being updated so the current design works well for this example)

2. Click the plus sign


3. Then Add to Home Screen

4. Update details if required to Add to Home (You can see the icon that will be used)

5. Then go to the home screen to see the created icon (which when clicked will take you to the webpage)

So whats the problem?

Well a screen shot gets taken of the webpage viewing area to create the icon and as you can see the icon button can not be recognised to represent the webpage. I can not even see the logo.

So what can the Iphone user do?

1. Well go back to the website and zoom so you get the logo in the top square area of the page

2. Follow the process to add to home screen.

The new icon is much nicer and I can now see the logo.

Only one problem: The icon when clicked goes to the zoomed section of the webpage. So only by unzooming by double tapping or unpinching the webpage will it show the full page. I believe this is not a floor but a feature because you can add certain sections of a webpage to favourite which is pretty handy.

So what can website designers do?

Similar to the favicon web designers can add an icon for the iphone to their websites.

1. Well all you need is a 57 x 57 pixel png image

You could get the png image following the steps above for iphone users and then get a screen shot of the home screen. Then just crop the icon to size. (or just create oe from scratch)

2. Name the icon as apple-touch-icon.png and upload to the root directory or alternativey add similar below to within the head tags

<link rel=”apple-touch-icon” href=”http://www.coolsite.com/icon.png”>

So now you can ensure the the iphone icons for your websites will be looking great.