SVG Favicon 生成器
上傳圖片，一鍵生成適配現代瀏覽器的 SVG 網站圖標。
將 PNG 或 JPG 圖片轉換為可縮放的 SVG favicon，適配高解析度與縮放場景。
Click or drag image here
Supports PNG, JPG, SVG, WEBP
Browser favicons (16x16, 32x32, 48x48)
Apple Touch Icons for iPhone & iPad
Android Chrome icons for PWA
SVG favicon & Safari pinned tab icon
Auto-generated site.webmanifest
PWA-ready favicon & manifest
Generate icons for Progressive Web Apps
隱私 / 安全
- 在瀏覽器本地處理檔案
- 不儲存任何上傳內容
- 生成完成後自動清理資料
適用對象
- 開發者
- 設計師
- 獨立開發者
- SaaS 創業者
適用情境
- 網站 favicon
- PWA 圖標
- Web 應用
- 行動應用占位圖標
什麼是 SVG Favicon？
SVG favicon 是一種基於向量的網站圖標格式，可以在任何螢幕尺寸下完美縮放。相較於 PNG 或 ICO 圖標，SVG favicon 在高解析度與縮放場景下依然保持清晰銳利。
SVG Favicon 的優勢
- 可無限縮放而不失真
- 相較點陣圖圖標，檔案體積更小
- 在高解析度與 Retina 螢幕上始終清晰
- 可以透過 CSS 輕鬆客製化樣式
- 現代瀏覽器廣泛支援
我們如何生成 SVG Favicon
我們會對你上傳的圖片進行向量化處理，將點陣圖（PNG、JPG）轉換為適合用作 favicon 的 SVG 路徑。
最適合以下類型的圖像：
- Logo / 品牌圖形
- 簡潔圖標
- 扁平插畫
- 結構清晰的簡單插畫
如何使用 SVG Favicon
基礎 SVG favicon 範例：
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Safari 固定分頁圖標範例：
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">SVG vs PNG vs ICO
| 格式 | 是否可縮放 | 視網膜螢幕支援 | 是否易於編輯 | 推薦使用情境 |
|---|---|---|---|---|
| SVG | 是 | 是 | 是 | 現代瀏覽器 |
| PNG | 否 | 部分支援 | 否 | 需要相容舊環境的點陣圖圖標 |
| ICO | 否 | 部分支援 | 否 | Windows / 傳統瀏覽器 |
上傳圖片，立即生成 SVG Favicon