Specify favicons in _document

CodeForAfrica · Aug 23, 2024 · 0681ac9 · 0681ac9
1 parent e8fad2f
commit 0681ac9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/apps/civicsignalblog/src/pages/_document.page.js b/apps/civicsignalblog/src/pages/_document.page.js
@@ -2,6 +2,7 @@ import createEmotionServer from "@emotion/server/create-instance";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import React from "react";
 
+import theme from "@/civicsignalblog/theme";
 import createEmotionCache from "@/civicsignalblog/utils/createEmotionCache";
 
 class MyDocument extends Document {
@@ -44,7 +45,7 @@ class MyDocument extends Document {
           <link rel="manifest" href="/site.webmanifest" />
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1020e1" />
           <meta name="msapplication-TileColor" content="#2b5797" />
-          <meta name="theme-color" content="#ffffff" />
+          <meta name="theme-color" content={theme.palette.primary.main} />
           <meta name="emotion-insertion-point" content="" />
           {this.props.emotionStyleTags}
         </Head>

diff --git a/apps/roboshield/src/pages/_document.tsx b/apps/roboshield/src/pages/_document.tsx
@@ -1,24 +1,46 @@
-import * as React from "react";
-import {
-  Html,
-  Head,
-  Main,
-  NextScript,
-  DocumentProps,
-  DocumentContext,
-} from "next/document";
 import {
   DocumentHeadTags,
   DocumentHeadTagsProps,
   documentGetInitialProps,
 } from "@mui/material-nextjs/v14-pagesRouter";
+import {
+  DocumentContext,
+  DocumentProps,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from "next/document";
+
+import theme from "@/roboshield/theme";
 
 export default function MyDocument(
   props: DocumentProps & DocumentHeadTagsProps,
 ) {
   return (
     <Html lang="en">
       <Head>
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1020e1" />
+        <meta name="msapplication-TileColor" content="#2b5797" />
+        <meta name="theme-color" content={theme.palette.primary.main} />
         <link rel="shortcut icon" href="/favicon.ico" />
         <meta name="emotion-insertion-point" content="" />
         <DocumentHeadTags {...props} />