Added favicon, manifest generation and graphics for it

dm1sh · Oct 19, 2021 · fe13f05 · fe13f05
1 parent e2a7e9f
commit fe13f05
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React application</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/pwa-192x192.png" />
+    <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
+    <meta name="msapplication-TileColor" content="#FFFFFF" />
+    <meta name="theme-color" content="#ffffff" />
+    <title>TooDo</title>
   </head>
 
   <body>

diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "@types/react-dom": "^17.0.9",
     "serve": "^12.0.0",
     "typescript": "^4.4.2",
-    "vite": "^2.5.3"
+    "vite": "^2.5.3",
+    "vite-plugin-pwa": "^0.11.3"
   },
   "dependencies": {
     "@mui/icons-material": "^5.0.3",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/pwa-192x192.png b/public/pwa-192x192.png
diff --git a/public/pwa-512x512.png b/public/pwa-512x512.png
diff --git a/public/pwa-maskable-512x512.png b/public/pwa-maskable-512x512.png
diff --git a/vite.config.js b/vite.config.js
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+
+export default defineConfig({
+  plugins: [
+    VitePWA({
+      includeAssets: ["robots.txt", "favicon.ico", "favicon.svg"],
+      manifest: {
+        name: "TooDo",
+        short_name: "TooDo",
+        description: "Task management application",
+        theme_color: "#ffffff",
+        icons: [
+          {
+            src: "pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "pwa-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
+      },
+    }),
+  ],
+});