Wednesday 7 April 2010

iPhone Mobile Web icon

With Add to "Home Screen" feature by iPhone, any website can easily expand to Mobile web page by adding 57*57 image (png).


This is easy step.
1. Create your own icon (57*57 png format)
Create a 57x57 PNG.
Name it "apple-touch-icon.png"

How to create icon (glassy 57*57 png format)
http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html#//apple_ref/doc/uid/TP40007900-CH6-SW31

2. locate this icon on Root on your website

Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)

3. Add link tag on your landing page

Here is the information
How to add icon on the website
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

add link tag
href="http://url/images/twitter_57.png" rel="apple-touch-icon"

4. Nothing to do - Safari works for you
t's basically just a 57x57 pixel PNG image with no special effects applied. The device itself will add rounded corners, a drop-shadow, and a glassy reflection

No comments: