Browse » Home » » 1 favicon is is not enough for your application

1 favicon is is not enough for your application

By Kamil Swied


With the increasing popularity of smartphones and tablets having 1 favicon for your website is no longer enough. Since Apple introduced the Add to Home Screen feature in their iOS operating system, iPhones, iPad's, iPod's and newer Android smartphones have supported adding a web site specific touch icon to the home screen of a mobile device. Touch icons are the favicons for mobile devices.

As with favicons, supporting touch icons adds to the professional look and feel of your website. To add a touch icon to your site is relatively easy if you know HTML, and have access to the files of your website. In its simplest form you must add the following line to the header of all pages on your website: Please note that the name and filepath of the picture file can be anything you want as long as it's specified in the header. And of course put the corresponding picture file in the specified place for the visitor's browser to find it. For a free, easy and automatic conversion of your gif images to the right size and specification visit the Online Icon Creator.

According to Apple specifications you should provide either 1 high resolution 144x144 pixels picture for iPads with the Retina Display, that will be automatically resized to 114x114 pixels image for iPhones with the Retina display, or resized to a 57x57 picture on all other devices. Or you can specify each size and picture individually like this:

For Androids, non-Retina iPhones and iPod Touch's

link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-precomposed.png"

For iPads 1 and 2

link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72-precomposed.png

For iPhones with high-resolution Retina display

link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114-precomposed.png

Also be aware that Apple devices will automatically add rounded corners, reflective shine and drop shadow to your touch icons unless you specifically tell them not to. You do that by using the precomposed tag in your specification.




About the Author:



0 comments:

Post a Comment

 
(c) Copyright Ikok Blog
-