Basics

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="KeepMins" />
<meta name="theme-color" content="#fffff" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <link rel="apple-touch-icon-precomposed" href="/i/iosicon.png" /> 
 <link rel="manifest" href="/static/manifest.json" /> 

iOS Status Bar

<meta name="apple-mobile-web-app-status-bar-style" content="取值">

default

black-translucent

black

White

manifest.json

{
   "name": "Keep Minutes",
   "short_name": "KeeMins",
   "theme_color": "#53c5e7",
   "background_color": "#53c5e7",
   "display": "fullscreen",
   "orientation": "portrait",
   "Scope": "/",
   "start_url": "/",
   "icons": [
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png"
     },
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png"
     },
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-128x128.png",
       "sizes": "128x128",
       "type": "image/png"
     },
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png"
     },
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-152x152.png",
       "sizes": "152x152",
       "type": "image/png"
     },
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-384x384.png",
       "sizes": "384x384",
       "type": "image/png"
     },
     {
       "src": "wp-content/themes/keep-minutes-2/i/icons/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
   ],
   "splash_pages": null
 }

<meta name="msapplication-navbutton-color" content="#3f51b5">
<meta name="msapplication-starturl" content="/?utm_source=homescreen">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Add To Home">
<meta name="apple-mobile-web-app-title" content="ADH">
<meta name="apple-mobile-web-app-status-bar-style" content="#3f51b5">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" sizes="192x192" href="icons/android-chrome-192x192.png" />
<link rel="apple-touch-icon" sizes="144x144" href="icons/android-chrome-144x144.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icons/android-chrome-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icons/android-chrome-72x72.png" />
<link rel="apple-touch-icon" sizes="57x57" href="icons/android-chrome-57x57.png" />
<link rel="apple-touch-icon" sizes="48x48" href="icons/android-chrome-48x48.png" />
<link rel="apple-touch-icon" sizes="36x36" href="icons/android-chrome-36x36.png" />
<link rel="icon" sizes="192x192" href="/icons/android-chrome-192x192.png" />
<link rel="icon" sizes="144x144" href="icons/android-chrome-144x144.png" />
<link rel="icon" sizes="114x114" href="icons/android-chrome-114x114.png" />
<link rel="icon" sizes="72x72" href="icons/android-chrome-72x72.png" />
<link rel="icon" sizes="57x57" href="icons/android-chrome-57x57.png" />
<link rel="icon" sizes="48x48" href="icons/android-chrome-48x48.png" />
<link rel="icon" sizes="36x36" href="icons/android-chrome-36x36.png" />
<link rel="icon" type="image/x-icon" href="icons/favicon.ico" />
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="theme-color" content="#3f51b5">

#mobile app