feat: add favicon to the app to avoid 404 (#19416)

* feat: add a favicon to the app

* make it work on M1

* chore: add comment in plugin configuration

* update sharp

package.json

@@ -272,8 +272,10 @@
     "**/@types/react": "16.9.50",
     "**/jquery": "3.1.1",
     "**/pretty-format": "26.4.0",
+    "**/sharp": "0.29.3",
     "**/socket.io-parser": "4.0.4",
     "**/ua-parser-js": "0.7.24",
+    "sharp": "0.29.3",
     "vue-template-compiler": "2.6.12"
   }
 }

packages/app/package.json

@@ -56,6 +56,7 @@
     "unplugin-vue-components": "^0.15.2",
     "vite": "2.4.4",
     "vite-plugin-components": "0.11.3",
+    "vite-plugin-favicon": "1.0.8",
     "vite-plugin-icons": "0.6.3",
     "vite-plugin-pages": "0.18.1",
     "vite-plugin-purge-icons": "0.7.0",

packages/app/vite.config.ts

@@ -1,4 +1,5 @@
 import { makeConfig } from '../frontend-shared/vite.config'
+import { ViteFaviconsPlugin } from 'vite-plugin-favicon'
 import Layouts from 'vite-plugin-vue-layouts'
 import Pages from 'vite-plugin-pages'
 
@@ -18,5 +19,20 @@ export default makeConfig({
   plugins: [
     Layouts(),
     Pages({ extensions: ['vue'] }),
+    ViteFaviconsPlugin({
+      logo: require.resolve('@packages/frontend-shared/src/assets/logos/favicon.png'),
+      // avoid building favicons for all formats at startup by explicitly saying no to most
+      // It takes a good 20 sec to make if we dont and we don't use it anyway
+      favicons: {
+        icons: {
+          android: false, // Create Android homescreen icon. `boolean` or `{ offset, background }` or an array of sources
+          appleIcon: false, // Create Apple touch icons. `boolean` or `{ offset, background }` or an array of sources
+          appleStartup: false, // Create Apple startup images. `boolean` or `{ offset, background }` or an array of sources
+          favicons: true, // Create regular favicons. `boolean` or `{ offset, background }` or an array of sources
+          windows: false, // Create Windows 8 tile icons. `boolean` or `{ offset, background }` or an array of sources
+          yandex: false, // Create Yandex browser icon. `boolean` or `{ offset, background }` or an array of sources
+        },
+      },
+    }),
   ],
 })