diff --git a/apps/frontend/app/(with-header-footer)/page.tsx b/apps/frontend/app/(with-header-footer)/page.tsx
index dc58af6..1989212 100644
--- a/apps/frontend/app/(with-header-footer)/page.tsx
+++ b/apps/frontend/app/(with-header-footer)/page.tsx
@@ -1,11 +1,10 @@
-import favicon from '../favicon.ico';
 import Image from 'next/image';
 
 export default function Home() {
   return (
     <div className="w-full flex-1 flex flex-col items-center justify-center">
       <Image
-        src={favicon.src}
+        src="/avatar.png"
         alt="TONE's avatar"
         width={180}
         height={180}
diff --git a/apps/frontend/app/favicon.ico b/apps/frontend/app/favicon.ico
deleted file mode 100644
index 46d8972..0000000
Binary files a/apps/frontend/app/favicon.ico and /dev/null differ
diff --git a/apps/frontend/app/layout.tsx b/apps/frontend/app/layout.tsx
index cdac60f..ee32996 100644
--- a/apps/frontend/app/layout.tsx
+++ b/apps/frontend/app/layout.tsx
@@ -27,6 +27,7 @@ export default async function RootLayout({
 
   return (
     <html lang="en" suppressHydrationWarning>
+      <link rel="icon" href="/favicon.ico" />
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
         suppressHydrationWarning
diff --git a/apps/frontend/public/avatar.png b/apps/frontend/public/avatar.png
new file mode 100644
index 0000000..ee63593
Binary files /dev/null and b/apps/frontend/public/avatar.png differ
diff --git a/apps/frontend/public/favicon.ico b/apps/frontend/public/favicon.ico
new file mode 100644
index 0000000..ed3df2d
Binary files /dev/null and b/apps/frontend/public/favicon.ico differ
