diff --git a/.DS_Store b/.DS_Store
index beb4ab6b..54199b6b 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/docs.json b/docs.json
index a2cbf8ac..53a50299 100644
--- a/docs.json
+++ b/docs.json
@@ -7,7 +7,7 @@
         "light": "#688FE8",
         "dark": "#0034FF"
     },
-    "favicon": "/dify-logo.png",
+    "favicon": "/logo/dify-logo.png",
     "logo": {
         "light": "https://assets-docs.dify.ai/2025/05/d05cfc6ebe48f725d171dc71c64a5d16.svg",
         "dark": "https://assets-docs.dify.ai/2025/05/51203d105b7f617cae7954e5a6639508.svg"
diff --git a/logo/convertor.html b/logo/convertor.html
new file mode 100644
index 00000000..5f361a77
--- /dev/null
+++ b/logo/convertor.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SVG to PNG Converter</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 30px;
+        }
+        .upload-area {
+            border: 3px dashed #ddd;
+            border-radius: 8px;
+            padding: 40px;
+            text-align: center;
+            margin-bottom: 30px;
+            cursor: pointer;
+            transition: border-color 0.3s;
+        }
+        .upload-area:hover {
+            border-color: #0033FF;
+        }
+        .upload-area.dragging {
+            border-color: #0033FF;
+            background-color: #f0f8ff;
+        }
+        .upload-area p {
+            margin: 10px 0;
+            color: #666;
+        }
+        .upload-button {
+            padding: 10px 20px;
+            background-color: #0033FF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .upload-button:hover {
+            background-color: #0028CC;
+        }
+        #fileInput {
+            display: none;
+        }
+        .preview-section {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+        .preview-box {
+            border: 2px solid #eee;
+            padding: 20px;
+            text-align: center;
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background-color: #fafafa;
+            border-radius: 8px;
+        }
+        .preview-box h3 {
+            margin-top: 0;
+            color: #666;
+        }
+        .controls {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-bottom: 20px;
+        }
+        label {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-weight: bold;
+        }
+        input[type="number"] {
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            width: 100px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #0033FF;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #0028CC;
+        }
+        button:disabled {
+            background-color: #999;
+            cursor: not-allowed;
+        }
+        #svgPreview {
+            max-width: 100%;
+            max-height: 300px;
+        }
+        #pngPreview {
+            max-width: 100%;
+            max-height: 300px;
+            border: 1px solid #eee;
+        }
+        .info {
+            background-color: #f0f8ff;
+            padding: 15px;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+        .transparent-toggle {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .hidden {
+            display: none;
+        }
+        .filename {
+            font-size: 14px;
+            color: #666;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>SVG to PNG Converter</h1>
+        
+        <div class="upload-area" id="uploadArea">
+            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                <polyline points="17 8 12 3 7 8"></polyline>
+                <line x1="12" y1="3" x2="12" y2="15"></line>
+            </svg>
+            <p><strong>Drag & Drop your SVG file here</strong></p>
+            <p>or</p>
+            <button class="upload-button" onclick="document.getElementById('fileInput').click()">Choose File</button>
+            <input type="file" id="fileInput" accept=".svg,image/svg+xml">
+            <p class="filename" id="filename"></p>
+        </div>
+        
+        <div class="preview-section hidden" id="previewSection">
+            <div class="preview-box">
+                <h3>Original SVG</h3>
+                <div id="svgPreview"></div>
+            </div>
+            <div class="preview-box">
+                <h3>Converted PNG</h3>
+                <canvas id="pngPreview"></canvas>
+            </div>
+        </div>
+        
+        <div class="controls hidden" id="controlsSection">
+            <label>
+                Width:
+                <input type="number" id="widthInput" value="800" min="1" max="4000">
+            </label>
+            <label>
+                Height:
+                <input type="number" id="heightInput" value="600" min="1" max="4000">
+            </label>
+            <label class="transparent-toggle">
+                <input type="checkbox" id="transparentBg" checked>
+                Transparent Background
+            </label>
+            <button id="convertBtn">Convert to PNG</button>
+            <button id="downloadBtn" disabled>Download PNG</button>
+        </div>
+        
+        <div class="info">
+            <p><strong>How to use:</strong></p>
+            <ul>
+                <li>Drag and drop an SVG file or click to upload</li>
+                <li>Adjust the width and height as needed</li>
+                <li>Choose whether you want a transparent background</li>
+                <li>Click "Convert to PNG" to generate the PNG image</li>
+                <li>Click "Download PNG" to save the converted image</li>
+            </ul>
+            <p><strong>Technical Details:</strong></p>
+            <ul>
+                <li>Conversion happens entirely in your browser using Canvas API</li>
+                <li>SVG (Scalable Vector Graphics) is converted to PNG (Portable Network Graphics)</li>
+                <li>The process: SVG → Image → Canvas → PNG data URL</li>
+                <li>Original aspect ratio can be maintained or changed as needed</li>
+            </ul>
+        </div>
+    </div>
+
+    <script>
+        let currentSvgContent = '';
+        let currentFilename = '';
+        
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const svgPreview = document.getElementById('svgPreview');
+        const canvas = document.getElementById('pngPreview');
+        const ctx = canvas.getContext('2d');
+        const widthInput = document.getElementById('widthInput');
+        const heightInput = document.getElementById('heightInput');
+        const convertBtn = document.getElementById('convertBtn');
+        const downloadBtn = document.getElementById('downloadBtn');
+        const transparentBg = document.getElementById('transparentBg');
+        const previewSection = document.getElementById('previewSection');
+        const controlsSection = document.getElementById('controlsSection');
+        const filenameDisplay = document.getElementById('filename');
+        
+        // Drag and drop events
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragging');
+        });
+        
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragging');
+        });
+        
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragging');
+            
+            const files = e.dataTransfer.files;
+            if (files.length > 0 && files[0].type === 'image/svg+xml') {
+                handleFile(files[0]);
+            }
+        });
+        
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleFile(e.target.files[0]);
+            }
+        });
+        
+        function handleFile(file) {
+            if (file.type !== 'image/svg+xml') {
+                alert('Please upload an SVG file');
+                return;
+            }
+            
+            currentFilename = file.name.replace('.svg', '');
+            filenameDisplay.textContent = file.name;
+            
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                currentSvgContent = e.target.result;
+                displaySvg();
+                previewSection.classList.remove('hidden');
+                controlsSection.classList.remove('hidden');
+                
+                // Extract original dimensions
+                const parser = new DOMParser();
+                const svgDoc = parser.parseFromString(currentSvgContent, 'image/svg+xml');
+                const svgElement = svgDoc.querySelector('svg');
+                
+                if (svgElement) {
+                    const viewBox = svgElement.getAttribute('viewBox');
+                    const width = svgElement.getAttribute('width');
+                    const height = svgElement.getAttribute('height');
+                    
+                    if (viewBox) {
+                        const [, , vbWidth, vbHeight] = viewBox.split(' ').map(Number);
+                        widthInput.value = Math.min(vbWidth * 2, 1600);
+                        heightInput.value = Math.min(vbHeight * 2, 1600);
+                    } else if (width && height) {
+                        widthInput.value = parseInt(width) * 2;
+                        heightInput.value = parseInt(height) * 2;
+                    }
+                }
+                
+                convertSvgToPng();
+            };
+            reader.readAsText(file);
+        }
+        
+        function displaySvg() {
+            svgPreview.innerHTML = currentSvgContent;
+            // Ensure SVG fits in preview
+            const svg = svgPreview.querySelector('svg');
+            if (svg) {
+                svg.style.maxWidth = '100%';
+                svg.style.maxHeight = '100%';
+                svg.style.height = 'auto';
+            }
+        }
+        
+        convertBtn.addEventListener('click', convertSvgToPng);
+        downloadBtn.addEventListener('click', downloadPng);
+        transparentBg.addEventListener('change', () => {
+            if (currentSvgContent) {
+                convertSvgToPng();
+            }
+        });
+        
+        function convertSvgToPng() {
+            const width = parseInt(widthInput.value);
+            const height = parseInt(heightInput.value);
+            
+            canvas.width = width;
+            canvas.height = height;
+            
+            const img = new Image();
+            const svgBlob = new Blob([currentSvgContent], { type: 'image/svg+xml' });
+            const url = URL.createObjectURL(svgBlob);
+            
+            img.onload = function() {
+                ctx.clearRect(0, 0, width, height);
+                
+                // Apply background if not transparent
+                if (!transparentBg.checked) {
+                    ctx.fillStyle = 'white';
+                    ctx.fillRect(0, 0, width, height);
+                }
+                
+                ctx.drawImage(img, 0, 0, width, height);
+                URL.revokeObjectURL(url);
+                downloadBtn.disabled = false;
+            };
+            
+            img.onerror = function() {
+                alert('Error converting SVG. Please check your file.');
+                URL.revokeObjectURL(url);
+            };
+            
+            img.src = url;
+        }
+        
+        function downloadPng() {
+            const link = document.createElement('a');
+            link.download = currentFilename + '.png';
+            
+            // Canvas toDataURL() creates a PNG by default
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/logo/dify-logo.png b/logo/dify-logo.png
new file mode 100644
index 00000000..707459b0
Binary files /dev/null and b/logo/dify-logo.png differ
diff --git a/logo/difyif-logo.svg b/logo/difyif-logo.svg
new file mode 100644
index 00000000..447e5d59
--- /dev/null
+++ b/logo/difyif-logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #03f;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="bg">
+    <circle class="cls-2" cx="12" cy="12" r="12"/>
+  </g>
+  <g id="logo">
+    <g>
+      <path class="cls-1" d="M9.11,8.58c.94,0,1.29-.58,1.29-1.29s-.35-1.29-1.29-1.29-1.29.58-1.29,1.29.35,1.29,1.29,1.29Z"/>
+      <path class="cls-1" d="M13.64,8.86v.83h-2.12v1.85h2.12v4.62h-3.51v-6.46s0,0,0,0h-4.62v1.85h2.58v4.62h-3.05v1.85h13.85v-1.85h-3.23v-4.62h3.23v-1.85h-3.23v-1.85h3.23v-1.85h-2.4c-1.58,0-2.86,1.28-2.86,2.86Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
