diff --git a/src/App.vue b/src/App.vue
index 7f794e1..11b17d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useTheme } from '@/composables/useTheme'
+import brandLogo from '@/assets/brand-logo.svg'
 
 const auth = useAuthStore()
 const router = useRouter()
@@ -30,28 +31,7 @@ async function handleLogout() {
   <div>
     <header class="app-header">
       <router-link to="/" class="brand" aria-label="Mach-CMS 首页">
-        <svg class="brand-logo" viewBox="0 0 116 30" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mach">
-          <defs>
-            <filter id="brand-glow" x="-40%" y="-80%" width="180%" height="260%">
-              <feGaussianBlur stdDeviation="1.6" result="blur" />
-              <feMerge>
-                <feMergeNode in="blur" />
-                <feMergeNode in="blur" />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
-          </defs>
-          <text
-            x="1" y="24"
-            fill="#ffffff"
-            font-family="'Noto Sans SC','Source Code Pro',monospace"
-            font-size="21"
-            font-weight="700"
-            letter-spacing="5"
-            filter="url(#brand-glow)"
-          >Mach</text>
-          <line x1="2" y1="28" x2="100" y2="28" stroke="#7ff0ff" stroke-width="1.2" opacity="0.9" stroke-linecap="round" />
-        </svg>
+        <img :src="brandLogo" class="brand-logo" alt="Mach" />
       </router-link>
       <span v-if="pageTitle" class="header-page-title"><span class="header-title-sep">×</span>{{ pageTitle }}</span>
       <nav class="nav-links">
diff --git a/src/assets/brand-logo.svg b/src/assets/brand-logo.svg
new file mode 100644
index 0000000..48c24c6
--- /dev/null
+++ b/src/assets/brand-logo.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="116" height="30" viewBox="0 0 116 30" role="img" aria-label="Mach">
+  <defs>
+    <filter id="brand-glow" x="-40%" y="-80%" width="180%" height="260%">
+      <feGaussianBlur stdDeviation="1.6" result="blur" />
+      <feMerge>
+        <feMergeNode in="blur" />
+        <feMergeNode in="blur" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+  <text x="1" y="24" fill="#ffffff" font-family="'Noto Sans SC','Source Code Pro',monospace" font-size="21" font-weight="700" letter-spacing="5" filter="url(#brand-glow)">Mach</text>
+  <line x1="2" y1="28" x2="100" y2="28" stroke="#7ff0ff" stroke-width="1.2" opacity="0.9" stroke-linecap="round" />
+</svg>