How To Have A Website Splash Screen (web App)

I am using Android phones and I have made a website designed as a web app. ie. you add the web app to the homescreen, Android treats it as a web app by loading it full screen, etc.

Solution 1:

As of Chrome M47, a splashscreen is automatically applied to all web apps when launched from the Home screen. The splashscreen is somewhat configurable via an app manifest file, but the standard is still under development. Splashscreens are a feature specific to Chrome for Android and are not available when using the legacy Android browser.

You can read more about the available splashscreen settings here: https://developers.google.com/web/updates/2015/10/splashscreenhttp://www.w3.org/TR/appmanifest/

Solution 2:

You need to add the manifest.json to your stack and have it linked within the head like any standard link or meta tag.

Create the manifest.json:

{  
"short_name": "Voice Memos",  
"name": "Voice Memos",  
"start_url": "./?utm_source=web_app_manifest",  
"icons": [  
{  
  "src": "/images/icon-192x192.png",  
  "sizes": "192x192",  
  "type": "image/png"  
},  
{  
  "src": "/images/icon-256x256.png",  
  "sizes": "256x256",  
  "type": "image/png"  
},  
{  
  "src": "/images/icon-384x384.png",  
  "sizes": "384x384",  
  "type": "image/png"  
},  
{  
  "src": "/images/icon-512x512.png",  
  "sizes": "512x512",  
  "type": "image/png"  
}
],  
"background_color": "#FAFAFA",
"theme_color": "#512DA8", 
"display": "standalone",  
"orientation": "portrait"  
}

Add a link to the file: <link rel="manifest" href="manifest.json">

And you'll also need to enable it:

`    <!-- Add to homescreen for Chrome on Android --><metaname="mobile-web-app-capable"content="yes"><metaname="application-name"content="Your app name"><linkrel="icon"sizes="192x192"href="apple-touch-icon-192x192.png">`

There's more info in the link in the other answer as well: https://stackoverflow.com/a/34376716/1876722