diff --git a/.dumi/global.css b/.dumi/global.css
index 4c8b1fef..808102c5 100644
--- a/.dumi/global.css
+++ b/.dumi/global.css
@@ -11,3 +11,7 @@
 .dumi-default-table-content th {
   text-align: left;
 }
+
+.main-info-logo {
+  width: 400px;
+}
diff --git a/.dumirc.ts b/.dumirc.ts
index d334a067..da028923 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -2,6 +2,13 @@ import { defineConfig } from 'dumi';
 
 export default defineConfig({
   outputPath: 'docs-dist',
+  favicons: [
+    '/favicons/favicon.ico',
+    '/favicons/favicon-16x16.png',
+    '/favicons/favicon-32x32.png',
+    '/favicons/favicon-64x64.png',
+  ],
+  logo: '/logos/nav-logo-375.png',
   themeConfig: {
     name: 'Banana UI',
     footer: false,
diff --git a/README.md b/README.md
index e4bdca7b..e41c4f20 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,8 @@
 
 `Banana UI` 是一套底层基于 `Web Components` 的组件库，它提供了一套常用的组件。
 
+<img height="160" src="./public/logos/main-logo-800.png">
+
 官方文档: https://banana-ui.com/
 
 ## ⭐️ 特性
diff --git a/docs/doc-components/main-info/index.css b/docs/doc-components/main-info/index.css
new file mode 100644
index 00000000..c8313e23
--- /dev/null
+++ b/docs/doc-components/main-info/index.css
@@ -0,0 +1,5 @@
+.main-info-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/docs/doc-components/main-info/index.tsx b/docs/doc-components/main-info/index.tsx
new file mode 100644
index 00000000..50e0ab5b
--- /dev/null
+++ b/docs/doc-components/main-info/index.tsx
@@ -0,0 +1,10 @@
+import './index.css';
+
+export default function MainInfo() {
+  return (
+    <div className="main-info-wrapper">
+      {/* <div className="main-info-canvas"></div> */}
+      <img className="main-info-logo" src="/logos/main-logo-800.png" />
+    </div>
+  );
+}
diff --git a/docs/index.md b/docs/index.md
index 112c1e5f..744b57f8 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,6 @@
 ---
 hero:
-  title: Banana
+  title: <img class="main-info-logo" src="/logos/main-logo-800.png" />
   description: 一套可<strong>跨框架</strong>使用的、支持SSR的组件库
   actions:
     - text: 快速上手
@@ -9,4 +9,6 @@ hero:
       link: /example/button
 ---
 
+<!-- <code inline src="./doc-components/main-info/index.tsx"></code> -->
+
 <code inline src="./doc-components/features/index.tsx"></code>
diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png
new file mode 100644
index 00000000..c7a70df0
Binary files /dev/null and b/public/favicons/favicon-16x16.png differ
diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png
new file mode 100644
index 00000000..7915d26a
Binary files /dev/null and b/public/favicons/favicon-32x32.png differ
diff --git a/public/favicons/favicon-64x64.png b/public/favicons/favicon-64x64.png
new file mode 100644
index 00000000..56c0fac2
Binary files /dev/null and b/public/favicons/favicon-64x64.png differ
diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico
new file mode 100644
index 00000000..d0d1422b
Binary files /dev/null and b/public/favicons/favicon.ico differ
diff --git a/public/logos/main-logo-800.png b/public/logos/main-logo-800.png
new file mode 100644
index 00000000..bf81b0c5
Binary files /dev/null and b/public/logos/main-logo-800.png differ
diff --git a/public/logos/nav-logo-375.png b/public/logos/nav-logo-375.png
new file mode 100644
index 00000000..f0c5a62b
Binary files /dev/null and b/public/logos/nav-logo-375.png differ