Add manifest.json and reference icons in _document

heyitsarpit · heyitsarpit · commit c6bf8eaef3f1 · 2021-08-27T23:36:07.000+05:30
diff --git a/website/pages/_document.tsx b/website/pages/_document.tsx
@@ -6,8 +6,9 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          <link rel="shortcut icon" href="/images/icon-48x48.png" />
-          <link rel="apple-touch-icon" href="/images/icon-192x192.png" />
+          <link rel="shortcut icon" href="/icons/favicon.ico" />
+          <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
+          <link rel="manifest" href="/manifest.json" />
         </Head>
         <body>
           <script
diff --git a/website/public/manifest.json b/website/public/manifest.json
@@ -0,0 +1,44 @@
+{
+    "name": "React Hooks Library",
+    "short_name": "React Hooks Library",
+    "theme_color": "#ffffff",
+    "background_color": "#004740",
+    "display": "fullscreen",
+    "orientation": "portrait",
+    "scope": "/",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "icons/maskable_icon_x48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/maskable_icon_x72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/maskable_icon_x96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/maskable_icon_x128.png",
+            "sizes": "128x128",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/maskable_icon_x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/maskable_icon.png",
+            "sizes": "480x480",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "splash_pages": null
+}
