diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 6902c56..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..4397c95
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0847589..2ff3297 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -116,3 +116,20 @@
 .nextra-nav-container a[href*="tags/"] {
   display: none;
 }
+
+@keyframes shake {
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-3px, -2px); }
+  20% { transform: translate(3px, 2px); }
+  30% { transform: translate(-3px, -1px); }
+  40% { transform: translate(3px, 1px); }
+  50% { transform: translate(-2px, -2px); }
+  60% { transform: translate(2px, 2px); }
+  70% { transform: translate(-2px, -1px); }
+  80% { transform: translate(2px, 1px); }
+  90% { transform: translate(-1px, -1px); }
+}
+
+.logo-shake:hover .logo-image {
+  animation: shake 0.8s ease-in-out;
+}
diff --git a/src/theme.config.tsx b/src/theme.config.tsx
index 6326562..94457fc 100644
--- a/src/theme.config.tsx
+++ b/src/theme.config.tsx
@@ -23,8 +23,20 @@ import TagContent from "@/components/tags";
 import { Archived } from "@/components/archived";
 import { Separator } from "@/components/ui/separator";
 import { Code } from "@/components";
-
-const logo = <p className="flex flex-nowrap">Lifecycle</p>;
+import Image from "next/image";
+
+const logo = (
+  <div className="flex items-center gap-2 logo-shake">
+    <Image
+      src="/logo.png"
+      alt="Lifecycle"
+      width={32}
+      height={32}
+      className="rounded logo-image"
+    />
+    <span className="text-lg font-semibold tracking-wide">Lifecycle</span>
+  </div>
+);
 
 export type MainProps = {
   children?: ReactElement;
@@ -59,6 +71,7 @@ export const HeadMeta = () => {
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta property="og:title" content="Lifecycle" />
       <meta property="og:description" content="Documentation for Lifecycle" />
+      <link rel="icon" type="image/png" href="/logo.png" />
     </>
   );
 };