Mobile browsing is rapidly growing. We all know the importance of providing a better experience for our mobile customers. To get mobile traffic you can take a simple step to learn how to add Apple Touch Icon to website. If you are not using Apple Icons, iOS grabs a compressed thumbnail of your website and use it as an icon. Adding apple touch icons to website is like adding favicons for mobile devices. When a user decides to bookmark your website by adding it to the home screen of their mobile phone/tablet, this icon will be used.
How To Create Apple Icons
First you need to create your icons for mobile device. If you use only one image, the device can automatically scale this single image for various size. This is not good in terms of speed and bandwidth. So we are going to create 4 .png files for different devices. Don’t worry about to create the round corners and glass effect for mobile devices. This effect will be applied automatically by auto method of device and it looks very nice.
If you don’t want the mobile device to automatically apply the special effects to the images, simply use following HTML code in your header :
<link href="images/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />
You can see four different size of images for different devices.
Apple Icon Image Sizes
- iPad Retina 144x144px
- iPhone/iPod Retina 114x114px
- Non-Retina iPad 72x72px
- Non-Retina iPhone/iPod 57x57px
Use naming convention according to device for save your icons. This will be easier to read your code and help to modify things in the future. following example for naming your icon files.
- apple-touch-icon-iphone.png : 57 x 57px
- apple-touch-icon-ipad.png : 72 x 72px
- apple-touch-icon-iphone-retina.png : 114 x 114px
- apple-touch-icon-ipad-retina.png : 144 x 144px
When your all image files created, you need to upload them to your web server and reference the location of the images to your website image section. Finally, just need to include the following code in the head tag:
<link href="images/apple-touch-icon-iphone.png" rel="apple-touch-icon" /> <link href="images/apple-touch-icon-ipad.png" rel="apple-touch-icon" sizes="72×72" /> <link href="images/apple-touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="114×114" /> <link href="images/apple-touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="144×144" />
I hope by this you understand how to add Apple Touch Icon to Website.
