Web Clip Icon on Home Screen for iPad and iPhone

It's possible to create native-look iPhone or iPad applications by using HTML and Javascript. But if you want to more you need to apply some settings on your html page. For instance web clip icon on your home screen. Please keep reading to learn how to do that.

When you click icon on your Home Screen, your web application opens without address bar.It looks like native application. In order to build native-feeling iOS application you need to add following statement inside Head tag in your html page.

<link rel="apple-touch-icon" href="images/yourIcon.png" />


Your icon size for iPhone and iPod should be 57x57 pixels or 114x114 pixels for high resolution

For iPad you need to create and icon that measures; 72x72 pixels.

iOS automatically add some visual effects such as glosy finish, rounded corners and reflective shine. So you don't need to add any visual effects to your icon.

For more information about web clip icons check this documentation.