If you are someone who likes to keep up with all the news from Apple, you've probably already added a shortcut iPadizate to the home screen of your iPhone, iPod Touch or iPad . And if not, what are you waiting?
Customizing the Apple Touch Icon Favicon
Called Apple Touch Icon and you can also customize it with Apple iOS devices from version 1.1.3.
To start, create an icon in PNG format with a minimum resolution of 72dpi and different sizes for each device:
- iPhone and iPod Touch: 57 × 57 pixels
- iPad: 72 × 72 pixels
- iPhone 4 and following versions: 114 × 114 pixels
For a basic setup of the Apple Touch Icon, climb the 57 × 57 icon to the root directory of the website with the name apple-touch-icon.png.
iOS takes care of him by himself rounded edges and add glitter effect. As of iOS 2.0 we can eliminate this brightness using the file name apple-touch-icon-precomposed.png.
In iOS 4.2 and later versions can optimize viewing on each apparatus according to the resolution that we have indicated for different devices. In that case, instead of rising to the root directory one file named apple-touch-icon.png , climb one for each resolution: apple-touch-icon-57x57.png , apple-touch-icon-72x72.png and apple-touch-icon-114x114.png .
To remove the shine effect, we add the termination -precomposed.png the filename as explained above.
With this method we do not need to touch the page code, but maybe Apple devices take too long to find the icon and users lose patience.
To avoid this little problem, we can make a more complete configuration of Apple Touch Icon adding a few lines of code in the <head> of our site.
To use a single icon on all devices, write: <link rel="apple-touch-icon" href="/nombre-icono.png"/ or <link rel="apple-touch-icon-precomposed" href="/nombre-icono.png"/> (without glare).
To use custom icons for different pages, we will change the image path in the attribute href for. Attentive to the bar here at the beginning of /nombre-icono , indicating that the file is searched in the root directory of the website (if you write without bar path, the file is searched in the directory of the page itself).
The lines of code to define different Apple Touch Icon for iPhone, iPod Touch and iPad include the attribute sizes :
<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone4.png" />
Now all your readers can add the custom icon of your website to the home screen of your iOS devices.
Share this article with your friends on popular social networks with the buttons you'll find at the beginning of it. Thank you!
More info on Rocio Miró
iPadizate , best blog on the Apple iPad.
 |  |
Posts
No comments:
Post a Comment