Useful Hacks, Reviews, Tips and Tricks of anything under the moon and the sun.

Customize The iOS Home Screen Icon Of Your Website

1 comment
Add link to Home Screen on iOS safari creates shortcut of any website or web mobile app in Home Screen of your iPad, iTouch and iPhone. iOS creates thumbnail image of the website by default and sometimes the image generated is not that good. Fortunately for website owners they can customize that icon with their own. Learn how to replace the default Home Screen icon after jump.

First, you need to create an icon with png extension using any available tool or you can use any existing icon you already have. Just take note of the following standard icon sizes: iPhone or iTouch (57x57), iPad(72x72), iPad retina (114x114). The safest resolution is 72dpi.

Now to add the icon on your website, simply add the following code on the top of your default website file (default.html, index.html, etc.)

<link rel="apple-touch-icon" href="/your-custom-icon.png"/>

You may also have different icon for different devices. Just put the size on each href tag.

<link rel="apple-touch-icon" sizes="72x72" href="/your-custom-icon.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/your-custom-icon.png"/>

Now when your user decides to add your website or web app to their home screen, the icon you created will be used in place of a scaled-down thumbnail of the page itself.

1 comment :