insight

Home screen launcher icons, what are they? and how to add one to your website?

28-Nov-2015 Apple touch icons or Website launcher icons whatever you prefer to call them are simply the icons which are used if you save a website to the home screen of your smart phone.

The functionality to add these quick launch links to the home screen of your iPhone or Android smart phone has been around for a long time but still so many sites haven’t got them in place and if they do they are often the lower resolution ones not making full use of the retina screen iPhone 4 quality display

This quick blog post will show you how to add the high quality launcher icons to your website header

You will need 3 square Icons designed at 57px X 57px, 72px X 72px and 114px X 114px – don’t worry about the rounded corners these and the gloss will be added dynamically just like the apps.

Name them accordingly:

apple-touch-icon.png
apple-touch-icon-72x72.png
apple-touch-icon-114x114.png
These files will then need adding to the root folder of your website

Next copy the code below and add to your website header and change the full URLs destination to be your website address. I believe it is important to have full URLS for this code to work on Android but unfortunately I have no way to test it at the moment.

<!—iPhone 3, iPod Touch, and Android 2.1+ devices: -->
<link href="http://www.app-icon-designer.com/apple-touch-icon.png" rel="apple-touch-icon " />

<!-- iPad: -->
<link href="http://www.app-icon-designer.com/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon " />

<!-- iPhone 4: -->
<link href="http://www.app-icon-designer.com/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon " />

Looking for some design work? See what we can do for your app
more

If you’re looking for a fast, reliable designer look no further.

about us