diff --git a/public/images/computing-box-logo.webp b/public/images/computing-box-logo.webp
new file mode 100644
index 0000000..fc856a8
Binary files /dev/null and b/public/images/computing-box-logo.webp differ
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
new file mode 100644
index 0000000..7adca98
Binary files /dev/null and b/public/images/favicon.ico differ
diff --git a/public/images/favicon.webp b/public/images/favicon.webp
new file mode 100644
index 0000000..438ebd8
Binary files /dev/null and b/public/images/favicon.webp differ
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index bc9baa0..e67e10e 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -33,12 +33,13 @@ const { title = "Computing:Box" } = Astro.props;
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
   </head>
   <body>
     <header class="siteNav">
       <div class="navInner">
         <a class="brand" href="/">
-          <img class="brandLogo" src="/images/computing-box-logo.svg" alt="Computing:Box logo" />
+          <img class="brandLogo" src="/images/computing-box-logo.webp" alt="Computing:Box logo" />
           <span class="brandName">Computing:Box</span>
         </a>
 
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 0496060..6477041 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -6,7 +6,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   <article style="max-width: 1100px; margin: 0 auto; width: 100%;">
     
     <div style="text-align: center; margin-bottom: 60px;">
-        <img src="/images/computing-box-logo.svg" alt="Computing:Box Logo" style="width: 250px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);" />
+        <img src="/images/computing-box-logo.webp" alt="Computing:Box Logo" style="width: 250px; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);" />
         <h1 class="brandName" style="font-size: 42px; margin-top: 20px; color: var(--text);">The New Computing:Box Experience</h1>
     </div>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7490d18..7abf66f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,7 +17,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     </div>
     
     <div style="flex: 1; text-align: right;">
-      <img src="/images/computing-box-logo.svg" alt="Computing Box Logo" style="width: 100%; max-width: 450px; filter: drop-shadow(0 0 50px rgba(40, 240, 122, 0.15));" />
+      <img src="/images/computing-box-logo.webp" alt="Computing Box Logo" style="width: 100%; max-width: 450px; filter: drop-shadow(0 0 50px rgba(40, 240, 122, 0.15));" />
     </div>
   </div>
 </BaseLayout>
\ No newline at end of file
