diff --git a/app/Header.tsx b/app/Header.tsx
index acd67454..5ef9309b 100644
--- a/app/Header.tsx
+++ b/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
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 4c77164a..383d5983 100644
--- a/app/login/page.tsx
+++ b/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
diff --git a/lib/client/media.ts b/lib/client/media.tsx
similarity index 74%
rename from lib/client/media.ts
rename to lib/client/media.tsx
index 73909462..ba776035 100644
--- a/lib/client/media.ts
+++ b/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"/>
 }
\ No newline at end of file