Add web-manifest to the website

_includes/head.html

@@ -1,7 +1,27 @@
 <meta charset='utf-8'>
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+<link rel="manifest" href="/manifest.json">
+
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="application-name" content="ConstraintLayout">
+<meta name="apple-mobile-web-app-title" content="ConstraintLayout">
 <meta name="theme-color" content="#00386F">
+<meta name="msapplication-navbutton-color" content="#00386F">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="msapplication-starturl" content="/">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="icon" sizes="256x256" href="assets/images/Icon1_256_blue.png">
+<link rel="apple-touch-icon" sizes="256x256" href="assets/images/Icon1_256_blue.png">
+<link rel="icon" sizes="128x128" href="assets/images/Icon1_128_blue.png">
+<link rel="apple-touch-icon" sizes="128x128" href="assets/images/Icon1_128_blue.png">
+<link rel="icon" sizes="64x64" href="assets/images/Icon1_64_blue.png">
+<link rel="apple-touch-icon" sizes="64x64" href="assets/images/Icon1_64_blue.png">
+<link rel="icon" sizes="48x48" href="assets/images/Icon1_48_blue.png">
+<link rel="apple-touch-icon" sizes="48x48" href="assets/images/Icon1_48_blue.png">
 <link rel="icon" type="image/png" href="{{ '/assets/images/favicon.png' | relative_url }}" />
 <link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "ConstraintLayout.com",
+  "short_name": "ConstraintLayout",
+  "lang": "en-GB",
+  "start_url": "/",
+  "display": "browser",
+  "theme_color": "#00386F",
+  "icons": [
+    {
+      "src": "assets/images/Icon1_48_blue.png",
+      "sizes": "48x48"
+    },
+    {
+      "src": "assets/images/Icon1_64_blue.png",
+      "sizes": "64x64"
+    },
+    {
+      "src": "assets/images/Icon1_128_blue.png",
+      "sizes": "128x128"
+    },
+    {
+      "src": "assets/images/Icon1_256_blue.png",
+      "sizes": "256x256"
+    }
+  ]
+}