How to Set an Apple Touch Icon

Thursday, January 7th, 2010

As iPhones and other Apple decives are becoming increasingly popular, it’s time to start paying attention to detail when building a website and adding in those little extra touches makes all the difference.

For pc browsers, websites can have a favourite icon, which is used when users bookmark your website. For Apple devices you can create a similar icon called the “Apple Touch Icon”, which when users add your website to their home screen.

This is done when the user:

• visits your website
• taps the + icon
• selects “Add to Home Screen”

Hopefully if done correctly, your icon is displayed (see below we’ve added ours). The good news is that it’s simple to do and easy to add as a new feature to your website.

The Code

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

How to do it

• Simply create a 57 x 57 pixel icon in your favourite graphic editing software.
• Save your website iPhone icon as PNG and name it “apple-touch-icon.png”
• Upload to your websites root folder, e.g. where the index.html file is
• Then enter the code (shown above) into your websites head tag
• Job done!

Tags: iPhone
Posted in Other, iPhone, website design | No Comments »