feat(web-app): example of favicons

belgattitude · Oct 16, 2021 · b36771c · b36771c
1 parent e456461
commit b36771c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/.changeset/khaki-crabs-boil.md b/.changeset/khaki-crabs-boil.md
@@ -0,0 +1,5 @@
+---
+'web-app': minor
+---
+
+Example of favicons
diff --git a/apps/web-app/src/pages/_app.tsx b/apps/web-app/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import type { EmotionCache } from '@emotion/react';
 import { appWithTranslation } from 'next-i18next';
 import type { AppProps as NextAppProps } from 'next/app';
+import Head from 'next/head';
 import { AppProviders } from '../app-providers';
 
 /**
@@ -32,6 +33,9 @@ const MyApp = (appProps: AppProps) => {
   const { Component, pageProps, emotionCache, err } = appProps;
   return (
     <AppProviders emotionCache={emotionCache}>
+      <Head>
+        <meta name="viewport" content="viewport-fit=cover" />
+      </Head>
       {/* Workaround for https://github.com/vercel/next.js/issues/8592 */}
       <Component {...pageProps} err={err} />
     </AppProviders>

diff --git a/apps/web-app/src/pages/_document.tsx b/apps/web-app/src/pages/_document.tsx
@@ -65,7 +65,39 @@ class MyDocument extends Document<Props> {
   render() {
     return (
       <Html>
-        <Head />
+        <Head>
+          <meta charSet="utf-8" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/images/favicon/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/images/favicon/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/images/favicon/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/images/favicon/site.webmanifest" />
+          <link
+            rel="mask-icon"
+            href="/images/favicon/safari-pinned-tab.svg"
+            color="#5bbad5"
+          />
+          <link rel="shortcut icon" href="/images/favicon/favicon.ico" />
+          <meta name="msapplication-TileColor" content="#da532c" />
+          <meta
+            name="msapplication-config"
+            content="/images/favicon/browserconfig.xml"
+          />
+          <meta name="theme-color" content="#ffffff" />
+        </Head>
         <body>
           <Main />
           <NextScript />