diff --git a/assets/favicon.svg b/assets/favicon.svg
new file mode 100644
index 00000000..c046e461
--- /dev/null
+++ b/assets/favicon.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 64 64"
+     role="img"
+     aria-label="SceneFab">
+  <defs>
+    <linearGradient id="bgFav" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0f0c29"/>
+      <stop offset="100%" stop-color="#24243e"/>
+    </linearGradient>
+    <linearGradient id="aiFav" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#4cc9f0"/>
+      <stop offset="100%" stop-color="#7209b7"/>
+    </linearGradient>
+    <radialGradient id="discFav" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#1a1a3e"/>
+      <stop offset="100%" stop-color="#0f0c29"/>
+    </radialGradient>
+  </defs>
+
+  <!-- Rounded square background -->
+  <rect width="64" height="64" rx="14" ry="14" fill="url(#bgFav)"/>
+
+  <!-- Simplified AI pulse (thicker for small-pixel rendering) -->
+  <path d="M 8 42 Q 18 36 28 42 T 48 42 T 56 42"
+        stroke="url(#aiFav)"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        fill="none"/>
+
+  <!-- Center play triangle on dark disc (enlarged for 16x16 legibility) -->
+  <g transform="translate(32 28)">
+    <circle r="13" fill="url(#discFav)" opacity="0.95"/>
+    <path d="M -4 -6 L 6 0 L -4 6 Z" fill="url(#aiFav)"/>
+  </g>
+</svg>
diff --git a/assets/logo-horizontal.svg b/assets/logo-horizontal.svg
new file mode 100644
index 00000000..427d130a
--- /dev/null
+++ b/assets/logo-horizontal.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 512 128"
+     role="img"
+     aria-label="SceneFab - AI 影视解说视频创作工具">
+  <defs>
+    <linearGradient id="bgGradH" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0f0c29"/>
+      <stop offset="50%" stop-color="#1a1a3e"/>
+      <stop offset="100%" stop-color="#24243e"/>
+    </linearGradient>
+    <linearGradient id="filmGradH" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ff8a5b"/>
+      <stop offset="100%" stop-color="#e63946"/>
+    </linearGradient>
+    <linearGradient id="aiGradH" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#4cc9f0"/>
+      <stop offset="100%" stop-color="#7209b7"/>
+    </linearGradient>
+    <radialGradient id="discGradH" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#1a1a3e"/>
+      <stop offset="100%" stop-color="#0f0c29"/>
+    </radialGradient>
+  </defs>
+
+  <!-- Logo mark on the left (square 96x96 within 128 height) -->
+  <g transform="translate(16 16)">
+    <rect width="96" height="96" rx="20" fill="url(#bgGradH)"/>
+
+    <!-- Starfield -->
+    <g fill="#ffffff" opacity="0.6">
+      <circle cx="14" cy="16" r="1"/>
+      <circle cx="82" cy="20" r="1"/>
+      <circle cx="18" cy="82" r="1"/>
+      <circle cx="80" cy="78" r="1"/>
+    </g>
+
+    <!-- Film strip tilted -->
+    <g transform="rotate(-22 48 48)">
+      <rect x="10" y="40" width="76" height="16" fill="url(#filmGradH)" rx="2"/>
+      <g fill="#0f0c29" opacity="0.85">
+        <rect x="14" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="22" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="30" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="38" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="46" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="54" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="62" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="70" y="42" width="4" height="2.5" rx="0.5"/>
+        <rect x="78" y="42" width="4" height="2.5" rx="0.5"/>
+      </g>
+      <g fill="#0f0c29" opacity="0.85">
+        <rect x="14" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="22" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="30" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="38" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="46" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="54" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="62" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="70" y="51.5" width="4" height="2.5" rx="0.5"/>
+        <rect x="78" y="51.5" width="4" height="2.5" rx="0.5"/>
+      </g>
+    </g>
+
+    <!-- AI pulse line -->
+    <path d="M 10 70 Q 24 64 38 70 T 66 70 T 94 70"
+          stroke="url(#aiGradH)" stroke-width="1.6" stroke-linecap="round" fill="none" opacity="0.9"/>
+    <path d="M 10 76 Q 24 72 38 76 T 66 76 T 94 76"
+          stroke="url(#aiGradH)" stroke-width="0.8" stroke-linecap="round" fill="none" opacity="0.5"/>
+
+    <!-- Center play triangle on dark disc -->
+    <g transform="translate(48 48)">
+      <circle r="16" fill="url(#discGradH)" opacity="0.92"/>
+      <path d="M -5 -7 L 7 0 L -5 7 Z" fill="url(#aiGradH)"/>
+    </g>
+  </g>
+
+  <!-- Wordmark on the right -->
+  <g transform="translate(132 0)">
+    <text x="0" y="60"
+          font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif"
+          font-size="40"
+          font-weight="700"
+          fill="#ffffff"
+          letter-spacing="-1">SceneFab</text>
+    <text x="0" y="90"
+          font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif"
+          font-size="14"
+          font-weight="500"
+          fill="url(#aiGradH)"
+          letter-spacing="0.5">AI 影视解说视频创作工具</text>
+  </g>
+</svg>
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 00000000..8153f6c6
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 256 256"
+     role="img"
+     aria-label="SceneFab - AI 影视解说视频创作工具">
+  <defs>
+    <!-- Deep space background -->
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0f0c29"/>
+      <stop offset="50%" stop-color="#1a1a3e"/>
+      <stop offset="100%" stop-color="#24243e"/>
+    </linearGradient>
+    <!-- Film strip warm gradient -->
+    <linearGradient id="filmGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ff8a5b"/>
+      <stop offset="100%" stop-color="#e63946"/>
+    </linearGradient>
+    <!-- AI neural pulse cool gradient -->
+    <linearGradient id="aiGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#4cc9f0"/>
+      <stop offset="100%" stop-color="#7209b7"/>
+    </linearGradient>
+    <!-- Center play disc -->
+    <radialGradient id="discGrad" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#1a1a3e"/>
+      <stop offset="100%" stop-color="#0f0c29"/>
+    </radialGradient>
+  </defs>
+
+  <!-- Background rounded square -->
+  <rect width="256" height="256" rx="56" ry="56" fill="url(#bgGrad)"/>
+
+  <!-- Subtle starfield (corner sparkles) -->
+  <g fill="#ffffff" opacity="0.6">
+    <circle cx="32" cy="36" r="1.5"/>
+    <circle cx="222" cy="48" r="2"/>
+    <circle cx="44" cy="218" r="1.5"/>
+    <circle cx="220" cy="210" r="2"/>
+    <circle cx="208" cy="32" r="1"/>
+    <circle cx="36" cy="220" r="1"/>
+  </g>
+
+  <!-- Film strip (45° tilt) -->
+  <g transform="rotate(-22 128 128)">
+    <rect x="32" y="108" width="192" height="40" fill="url(#filmGrad)" rx="4"/>
+    <!-- Top perforations row -->
+    <g fill="#0f0c29" opacity="0.85">
+      <rect x="42" y="114" width="8" height="6" rx="1"/>
+      <rect x="62" y="114" width="8" height="6" rx="1"/>
+      <rect x="82" y="114" width="8" height="6" rx="1"/>
+      <rect x="102" y="114" width="8" height="6" rx="1"/>
+      <rect x="122" y="114" width="8" height="6" rx="1"/>
+      <rect x="142" y="114" width="8" height="6" rx="1"/>
+      <rect x="162" y="114" width="8" height="6" rx="1"/>
+      <rect x="182" y="114" width="8" height="6" rx="1"/>
+      <rect x="202" y="114" width="8" height="6" rx="1"/>
+    </g>
+    <!-- Bottom perforations row -->
+    <g fill="#0f0c29" opacity="0.85">
+      <rect x="42" y="136" width="8" height="6" rx="1"/>
+      <rect x="62" y="136" width="8" height="6" rx="1"/>
+      <rect x="82" y="136" width="8" height="6" rx="1"/>
+      <rect x="102" y="136" width="8" height="6" rx="1"/>
+      <rect x="122" y="136" width="8" height="6" rx="1"/>
+      <rect x="142" y="136" width="8" height="6" rx="1"/>
+      <rect x="162" y="136" width="8" height="6" rx="1"/>
+      <rect x="182" y="136" width="8" height="6" rx="1"/>
+      <rect x="202" y="136" width="8" height="6" rx="1"/>
+    </g>
+  </g>
+
+  <!-- AI neural pulse line crossing through the film -->
+  <path d="M 32 168 Q 64 152 96 168 T 160 168 T 224 168"
+        stroke="url(#aiGrad)"
+        stroke-width="3.5"
+        stroke-linecap="round"
+        fill="none"
+        opacity="0.9"/>
+  <!-- Pulse echo (secondary) -->
+  <path d="M 32 184 Q 64 176 96 184 T 160 184 T 224 184"
+        stroke="url(#aiGrad)"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        fill="none"
+        opacity="0.5"/>
+
+  <!-- Center play triangle on dark disc -->
+  <g transform="translate(128 128)">
+    <circle r="42" fill="url(#discGrad)" opacity="0.92"/>
+    <path d="M -12 -18 L 18 0 L -12 18 Z" fill="url(#aiGrad)"/>
+  </g>
+</svg>