How to add Glossy App Icon for Mobile Web App on iOS platform?


Here is a short note on how to add glossy app icon for mobile web apps built in HTML5, ASP.NET MVC, jQuery Mobile/Sencha on iPad, iPhone platform. You need to select a standard .PNG file with proper icon formats (aka 114 x 114) for iPad , (54 X 54) for iPhone & add the .icon file in your mobile web app project root directory.

Simply add it in your HTML5 code after meta name viewport tag as:

<meta name=”apple-mobile-web-app-capable”content=”yes”/>

<meta name=”viewport”content=”width=device-width, initial-scale=1, maximum-scale=1″/>

<link rel=”apple-touch-icon”href=”icon.png”/>

Now, on iOS device, add the mobile web app on homescreen, then you can find your app icon along with the caption options.

AppIcon

Advertisements
%d bloggers like this: