Add logo and favicon.

theme/layout/Header.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import Image from "next/image";
 import {
   Heading,
   HStack,
@@ -10,6 +11,7 @@ import {
 import { Icon } from "@iconify/react";
 import DesktopNav from "./DesktopNav";
 import MobileNav from "./MobileNav";
+import appLogo from "../../public/images/logo.svg";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
@@ -82,8 +84,8 @@ const Header = (): JSX.Element => {
         open
           ? "brand.main"
           : transparentNavbar
-          ? "rgba(49, 56, 220, 0.9)"
-          : "brand.main"
+            ? "rgba(49, 56, 220, 0.9)"
+            : "brand.main"
       }
       transition=".5s ease"
       borderRadius="0px 0px 10px 10px"
@@ -113,6 +115,8 @@ const Header = (): JSX.Element => {
           cursor: "default"
         }}
       >
+        <Image height="30px" width="30px" src={appLogo} alt="App Logo" />
+
         <Heading as="h1" size="md">
           {appName}
         </Heading>
@@ -146,6 +150,7 @@ const Header = (): JSX.Element => {
                 cursor: "default"
               }}
             >
+              <Image height="30px" width="30px" src={appLogo} alt="App Logo" />
               <Heading as="h1" size="md">
                 {appName}
               </Heading>