Web applications can be designed to look and behave as native applications, that is applications that run on specific mobile devices.
There are several tools one can use in this respect. For example, one can take advantage of twitter bootstrap
responsive utilities and the viewport
meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
and disabling user zooming
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Another step is to add
web icons links to your site <head>
tag.
These icons are read and utilized by
mobile devices such as the iphone, ipad and android based tablets and phones when the web page is added to the home screen.
It looks like the web-application is a native app!
The correct sizes for web clip incons, as they are called, are on this apple page for iOS devices.
The icons are added via apple-touch-icon
rel links:
<link href="/quantmind-icon-152x152.png" rel="apple-touch-icon" sizes="76x76" />
<link
href="/quantmind-icon-120x120.png"
rel="apple-touch-icon"
sizes="120x120"
/>
<link
href="/quantmind-icon-152x152.png"
rel="apple-touch-icon"
sizes="152x152"
/>
<link
href="/quantmind-icon-180x180.png"
rel="apple-touch-icon"
sizes="180x180"
/>
Finally, to override the <title>
of the web site with a single name,
more appropiate for a native application icon, the <apple-mobile-web-app-title>
meta tag can be added:
<meta name='apple-mobile-web-app-title' content='Quantmind'>

Mini iPad

iPhone 4, 5, 6

iPad retina

iPhone 6 plus