Adiciona favicons à Home e configura o VitePWA no arquivo `vite.confi…

…g.js` com o manifesto (devhatt#72) * test * Issue 37 - Adiciona favicons a home e configura o VitePWA no vit.config.js Adiciona os favicons necessários e configura o manifesto no plugin VitePWA no arquivo `vite.config.js` --------- Co-authored-by: Alexandre Gomes <[email protected]>
JonasGz · Feb 29, 2024 · cc8aa1c · cc8aa1c
1 parent 2c6e39c
commit cc8aa1c
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 0 deletions.
diff --git a/src/home/index.html b/src/home/index.html
@@ -15,6 +15,22 @@
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans:wght@500&display=swap"
       rel="stylesheet"
     />
+
+  <link rel="icon" type="image/x-icon" sizes="192x192" href="/favicon/android-icon-192x192.ico">
+  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.ico">
+  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.ico">
+  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.ico">
+  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.ico">
+  <link rel="apple-touch-icon" sizes="96x96" href="/favicon/apple-touch-icon-96x96.ico">
+  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.ico">
+  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.ico">
+  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.ico">
+  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.ico">
+  <link rel="icon" type="image/x-icon" sizes="16x16" href="/favicon/favicon-16x16.ico">
+  <link rel="icon" type="image/x-icon" sizes="32x32" href="/favicon/favicon-32x32.ico">
+
+
   </head>
 
   <body>

diff --git a/src/public/favicon/android-icon-192x192.ico b/src/public/favicon/android-icon-192x192.ico
diff --git a/src/public/favicon/apple-touch-icon-114x114.ico b/src/public/favicon/apple-touch-icon-114x114.ico
diff --git a/src/public/favicon/apple-touch-icon-120x120.ico b/src/public/favicon/apple-touch-icon-120x120.ico
diff --git a/src/public/favicon/apple-touch-icon-144x144.ico b/src/public/favicon/apple-touch-icon-144x144.ico
diff --git a/src/public/favicon/apple-touch-icon-152x152.ico b/src/public/favicon/apple-touch-icon-152x152.ico
diff --git a/src/public/favicon/apple-touch-icon-180x180.ico b/src/public/favicon/apple-touch-icon-180x180.ico
diff --git a/src/public/favicon/apple-touch-icon-57x57.ico b/src/public/favicon/apple-touch-icon-57x57.ico
diff --git a/src/public/favicon/apple-touch-icon-60x60.ico b/src/public/favicon/apple-touch-icon-60x60.ico
diff --git a/src/public/favicon/apple-touch-icon-72x72.ico b/src/public/favicon/apple-touch-icon-72x72.ico
diff --git a/src/public/favicon/apple-touch-icon-76x76.ico b/src/public/favicon/apple-touch-icon-76x76.ico
diff --git a/src/public/favicon/apple-touch-icon-96x96.ico b/src/public/favicon/apple-touch-icon-96x96.ico
diff --git a/src/public/favicon/favicon-16x16.ico b/src/public/favicon/favicon-16x16.ico
diff --git a/src/public/favicon/favicon-32x32.ico b/src/public/favicon/favicon-32x32.ico
diff --git a/vite.config.js b/vite.config.js
@@ -1,6 +1,7 @@
 // vite.config.js
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
   root: resolve(__dirname, 'src'),
@@ -27,4 +28,47 @@ export default defineConfig({
       '~styles': resolve(__dirname, 'src/styles'),
     },
   },
+  plugins: [
+    VitePWA({
+      manifest: {
+        name: 'PetDex',
+        short_name: 'PetDex',
+        icons: [
+          {
+            src: "/favicon/android-icon-36x36.ico",
+            sizes: "36x36",
+            type: "image/png"
+          },
+          {
+            src: "/favicon/android-icon-48x48.ico",
+            sizes: "48x48",
+            type: "image/png"
+          },
+          {
+            src: "/favicon/android-icon-72x72.ico",
+            sizes: "72x72",
+            type: "image/png"
+          },
+          {
+            src: "/favicon/android-icon-96x96.ico",
+            sizes: "96x96",
+            type: "image/png"
+          },
+          {
+            src: "/favicon/android-icon-144x144.ico",
+            sizes: "144x144",
+            type: "image/png"
+          },
+          {
+            src: "/favicon/android-icon-192x192.ico",
+            sizes: "192x192",
+            type: "image/png"
+          }
+        ],
+        theme_color: '#ffffff',
+        background_color: '#ffffff',
+        display: 'standalone'
+      }
+    })
+  ]
 });