Web Icons

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'>

Warning: Icons must be in PNG format!

Mini iPad

iPhone 4, 5, 6

iPad retina

iPhone 6 plus