diff --git a/src/components/SiteLogoMark.vue b/src/components/SiteLogoMark.vue
new file mode 100644
index 0000000..a19d00a
--- /dev/null
+++ b/src/components/SiteLogoMark.vue
@@ -0,0 +1,36 @@
+<!--
+  站点 Logo 展示：优先显示图片，无 URL 或加载失败时回退为站点名称首字母。
+  用于 layout、login、register 等页面；src 不传则使用 siteStore.siteLogo。
+-->
+<template>
+  <img
+    v-if="showSiteLogoImg"
+    :src="siteLogo"
+    :class="imgClass"
+    alt="Logo"
+    @error="handleLogoError"
+  />
+  <div v-else :class="iconClass" :style="iconStyle">{{ fallbackLetter }}</div>
+</template>
+
+<script setup lang="ts">
+import { useSiteLogo } from '@/composables/useSiteLogo'
+
+const props = withDefaults(defineProps<{
+  /** 自定义 Logo 地址，默认取 siteStore.siteLogo */
+  src?: string
+  /** 图片模式下的 class */
+  imgClass?: string
+  /** 首字母 fallback 模式下的 class */
+  iconClass?: string
+  /** 首字母 fallback 的内联样式 */
+  iconStyle?: Record<string, string>
+}>(), {
+  imgClass: 'logo-img',
+  iconClass: 'logo-icon',
+})
+
+const { siteLogo, showSiteLogoImg, fallbackLetter, handleLogoError } = useSiteLogo(
+  () => props.src
+)
+</script>