How to make website look like an app

Things that we want to achieve:
1) make customizable shortcut to a device’s desktop.
2) hide browser navigation bar

Lets start with creating a shortcut. for safari:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="72x72" href="72.png">
<link rel="apple-touch-icon" sizes="114x114" href="114.png">
<link rel="apple-touch-icon" href="57.png">
<link rel="apple-touch-startup-image" href="splash.png">

for chrome:

<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="72x72" href="72.png">
<link rel="icon" sizes="114x114" href="114.png">
<link rel="icon" sizes="192x192" href="192.png">
<link rel="icon" sizes="57x57" href="57.png">

for IE10:

<meta name="name" content="" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="msapplication-square70x70logo" content="72.png" />
<meta name="msapplication-square150x150logo" content="150.png" />
<meta name="msapplication-wide310x150logo" content="310x150.png" />
<meta name="msapplication-square310x310logo" content="310.png" />

if you need to support other browsers then it might be a good idea to use manup.js polifill library. In this case you have to create manifest file:

{
  "name": "app name",
  "short_name": "app",
  "icons": [{
        "src": "64.png",
        "sizes": "64x64" 
    }, {
        "src": "128.png",
        "sizes": "128x128"    
    }],
  "start_url": "index.html",
  "display": "fullscreen",
  "orientation": "landscape"
}

Next I will explain how to solve safari full screen mode problem You have created a shortcut for your website and opened it. You can see safari in full screen mode BUT as soon as you navigate using href links safari returns to default mode with a navigation bar. My first clue was to use target=”_parent” in all links which should force new pages open in the current frame but for some reason that doesn’t work for safari. solution I did find in here. Actually only thing you should do to fix that is to add some javascript code to your page:

(function(document,navigator,standalone) {   
   if ((standalone in navigator) && navigator[standalone]) {      
      var curnode, location=document.location, stop=/^(a|html)$/i;
         document.addEventListener('click', function(e) {
            curnode=e.target;
            while (!(stop).test(curnode.nodeName)) {
               curnode=curnode.parentNode;
            }            
            if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
               e.preventDefault();
               location.href = curnode.href;
            }
      },false);
   }
})(document,window.navigator,'standalone');