Control Panel -> Help and Support -> Creating an apple touch icon
User anonymous - click to sign in

Creating an apple touch icon

As more and more people browse the web with their iOS devices, adding a simple icon to your site helps with branding and looks great making sure your brand is well represented on the iPhone, iPod touch and iPad.

Creating a web clip icon for iOS resolution

There are apps in the Mac App Store, like Icons, that can help developers create web clip icons. Otherwise, you can just use your favourite graphic editor to create the image file required.

Create an image 157 pixels by 157 pixels and add your logo, initials or whatever design you want to use. Remember that on some iOS devices this icon will be reduced down to 57 pixels so keep your design simple so that it renders clearly when small.

One thing that iOS completes for you is the rounded corners, a drop shadow and the iconic reflective shine to the icons you use. To take advantage of this, ensure that the image you create is perfectly square and free of shine or gloss effects. Save the image as a PNG file with filename "apple-touch-icon.png".

Adding the icon to your website

Upload your image to your Web Page Images. Go to Control Panel > My Web Site > Extras > Web Page Images.

Review your uploaded image and copy the Link Sample (highlight and copy-and-paste). Now we just need to add the instruction to your web site. Go to Control Panel -> My Web Site -> Site Layout -> Embed Custom HTML/CSS, and paste in the code below...

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

...replacing link-sample.png with your copied Link Sample to the top of the HEAD text area.

To test it, just visit your website using Safari (on your iPhone, iPad or other iOS device), then click the plus (+) button to add the bookmark, selecting the "Add to Home Screen" option when prompted. From here you can name your bookmark. You should see your new icon to the left; it can sometimes take a few seconds to appear.

The end result:

  Log Out | Home | Terms | Help | About | Contact | © Ltd