diff --git a/app/public/icon-192x192.png b/app/public/icon-192x192.png
new file mode 100644
index 00000000..d76eb1e0
Binary files /dev/null and b/app/public/icon-192x192.png differ
diff --git a/app/public/site.webmanifest b/app/public/site.webmanifest
new file mode 100644
index 00000000..a00c0381
--- /dev/null
+++ b/app/public/site.webmanifest
@@ -0,0 +1,14 @@
+{
+    "short_name": "Colouring London",
+    "name": "Colouring London",
+    "icons": [
+        {
+            "src": "icon-192x192.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        }
+    ],
+    "start_url": "/",
+    "background_color": "#ffffff",
+    "theme_color": "#fffff"
+}
\ No newline at end of file
diff --git a/app/src/frontendRoute.tsx b/app/src/frontendRoute.tsx
index f0e08a43..444abcc7 100644
--- a/app/src/frontendRoute.tsx
+++ b/app/src/frontendRoute.tsx
@@ -85,6 +85,16 @@ function renderHTML(context, data, req, res) {
         <meta property="og:locale"             content="en_GB" />
         <meta property="og:image"              content="https://colouring.london/images/logo-cl.png" />
 
+        <link rel="manifest" href="site.webmanifest">
+        
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="apple-mobile-web-app-title" content="Colouring London">
+        <link rel="apple-touch-icon" href="icon-192x192.png">
+
+        <meta name="mobile-web-app-capable" content="yes">
+        <link rel="icon" sizes="192x192" href="icon-192x192.png">
+
         <title>Colouring London</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <style>