Add favicon (#161)

* Add favicon * Minify svg * Simplify favicon and line up with pixel grid
orcasound · Jul 29, 2023 · 6ac9fa7 · 6ac9fa7
1 parent 081d0e9
commit 6ac9fa7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
diff --git a/ui/public/favicon.svg b/ui/public/favicon.svg
diff --git a/ui/public/vercel.svg b/ui/public/vercel.svg
diff --git a/ui/src/pages/_document.tsx b/ui/src/pages/_document.tsx
@@ -27,7 +27,16 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
       <Head>
         {/* PWA primary color */}
         <meta name="theme-color" content={theme.palette.primary.main} />
-        <link rel="shortcut icon" href="/favicon.ico" />
+        {/*
+            prefer svg favicon but use ico as fallback
+            svg will change color based on prefers-color-scheme media query
+            fallback ico is colorful to provide contrast on both light and dark
+            `sizes` attribute is required for Chrome to pick svg over multi-size ico
+            (see https://bugs.chromium.org/p/chromium/issues/detail?id=1450857 and
+            https://bugs.chromium.org/p/chromium/issues/detail?id=1162276)
+        */}
+        <link rel="icon" href="/favicon.ico?v=2" sizes="48x48"/>
+        <link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml" />
         <meta name="emotion-insertion-point" content="" />
         {emotionStyleTags}
       </Head>