The following settings will make a website added to the iOS homepage look and act nearly identical to a proper application. This will set the viewport to disallow scaling, so we must be careful to implement an adaptive viewport strategy ourselves.
In addition, this sets paths for all of the Apple icons used for startup and application icons.
<!-- optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- status bar style: default, black, or black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- home screen icons -->
<link rel="apple-touch-icon" href="/customIcon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/customIcon.png">
<link rel="apple-touch-icon" sizes="114x114" href="/customIcon.png">
<link rel="apple-touch-icon-precomposed" href="/customIcon.png">
<!-- startup images -->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="img/iphone.png"
media="screen and (max-device-width: 320px)">