Fix image

app/Header.tsx

@@ -3,9 +3,8 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
-import { FaHome } from "react-icons/fa";
 import ThemeToggle from "@/lib/client/theme";
-import Image from "next/image";
+import {favIcon} from "@/lib/client/media";
 
 export default function Header() {
   const { data: session } = useSession();
@@ -38,7 +37,7 @@ export default function Header() {
           className="text-4xl font-bold hover:text-blue-600 transition-colors flex items-center"
           aria-label={isSmallScreen ? "Home" : "Compass"}
         >
-          <Image src="/favicon.ico" alt="Compass logo" width={500} height={500} className="w-12 h-12 dark:invert"/>
+          {favIcon()}
           {!isSmallScreen && (
             <span className="flex items-center gap-2">
               Compass

app/login/page.tsx

@@ -5,7 +5,7 @@ import {useRouter, useSearchParams} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 import Link from "next/link";
 import {FcGoogle} from "react-icons/fc";
-import Image from "next/image";
+import {favIcon} from "@/lib/client/media";
 
 export default function LoginPage() {
   return (
@@ -72,7 +72,7 @@ function RegisterComponent() {
       <div className="max-w-md w-full space-y-8">
         <div>
           <div className="flex justify-center mb-6">
-            <Image src="/favicon.ico" alt="Compass logo" className="w-24 h-24 dark:invert" />
+            {favIcon()}
           </div>
           <h2 className="mt-6 text-center text-3xl font-extrabold ">
             Sign in to your account

lib/client/media.tsx

@@ -1,4 +1,5 @@
 'use client';
+import Image from "next/image";
 
 export async function parseImage(img: string, setImage: any, batch = false) {
   if (!img) {
@@ -21,4 +22,8 @@ export async function parseImage(img: string, setImage: any, batch = false) {
     }
   }
 
+}
+
+export function favIcon() {
+  return <Image src="/favicon.ico" alt="Compass logo" width={500} height={500} className="w-12 h-12 dark:invert"/>
 }