Scrapbook / Web Design & Devleopment

Apple touch icons – finishing touch to your site

Apple touch icons are the icons on the home screen of any iOS device that are usually used to access native applications. You can save your bookmarks to your home screen so why not provide a native app looking icon.

People have been using favicons for a long time and they are one of the finishing touches which I think are key to signing off a project. Plus the fact that there is no excuse not to provide websites with a favicon. In recent years iOS devices have shot through the roof in popularity, and that is why I have been creating apple touch icons to polish off sites that I am working on.

apple-touch-icon-img

These are really easy to make and to add to your site. I use four different sized icons, 144×144, 114×114, 72×72, and 57×57 to have an optimal size/quality graphics for the both standard and retina displays on both the iPhone and the iPad.

Once these have been created you can add these icons to your site, by placing the following code in your head tag (making sure the reference to where you have put them is correct). You can choose from the standard icon and ‘precomposed’. Standard gives you rounded corners and a gloss, precomposed just gives you the rounded corners, it’s worth having a play around to find out which you prefer.

Standard

<link href="/apple-touch-icon_57.png" rel="apple-touch-icon" />
<link href="/apple-touch-icon_72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="/apple-touch-icon_114.png" rel="apple-touch-icon" sizes="114x114" />
<link href="/apple-touch-icon_144.png" rel="apple-touch-icon" sizes="144x144" />

Precomposed

<link href="/apple-touch-icon_57.png" rel="apple-touch-icon-precomposed" />
<link href="/apple-touch-icon_72.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href="/apple-touch-icon_114.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href="/apple-touch-icon_144.png" rel="apple-touch-icon-precomposed" sizes="144x144" />

Now when people bookmark your site they don’t get a screenshot of the site they get this purpose-built icon which looks great and looks just like a native iOS application. It’s a great way of showing off work for both the designer/developer and the client. It also helps if the site is responsive but it doesn’t have to be, it is still a great finishing touch to any website and an easy way of accessing it.

UPDATE: If you are developing a website using WordPress or just testing it out you can also use this WordPress function to add your Apple touch icons to your header automatically.

What next?

Check out some of my work!

I'm constantly working on new and exciting projects. Check out my web design and development portfolio with write-ups on how each project was conducted. Looking for some great photography? Check out my latest photography articles or browse the whole colection. Finally, I love to write. I write about everything from the web and photography to many other subjects that interest me.