Favicon Generator Favicon 線上產生器

Favicon（Favorites Icon）是顯示在瀏覽器分頁、書籤列、歷史記錄與其他介面上的小型網站圖示。它是網站品牌識別的重要組成部分。

沒有 Favicon 的網站會顯示為空白或預設地球圖示，讓網站看起來不專業、未完成。提供一致的 Favicon 能：

• 強化品牌辨識 — 使用者在眾多分頁中一眼認出您的網站
• 提升專業形象 — 讓網站看起來更完整、可信
• 改善使用者體驗 — 在書籤、歷史與收藏中更容易找到
• 跨裝置一致 — 手機主畫面、桌面應用程式都使用同一識別

Favicon 是幾乎零成本、高回報的網站優化項目，任何正式上線的網站都應該設定。

兩者是不同格式的網站圖示，各有其歷史與用途：

建議做法：兩者並用。提供 favicon.ico 給舊瀏覽器與根目錄請求，同時提供多尺寸 PNG 給現代瀏覽器與裝置。本工具產生的 HTML 程式碼已包含最佳組合。

Apple Touch Icon（apple-touch-icon）是 iOS Safari 專用的圖示，當使用者將網站「加入主畫面」時顯示於 iPhone / iPad 主畫面上。標準尺寸為 180×180。

重要特性：

• iOS 會自動為圖示套用圓角、光澤與邊框效果，所以圖示本身不應預先加圓角
• 建議使用不透明背景，避免 iOS 以黑色填充透明區域
• 圖示內容應置中且留有安全邊距（約 10%），因為系統會裁切外圍
• Apple 裝置僅在「加入主畫面」時使用此圖示，瀏覽器分頁仍使用一般 Favicon

在 HTML 中以 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 宣告。

PWA（Progressive Web App） 是可安裝的網頁應用程式。PWA 需要透過 site.webmanifest 清單宣告圖示，且 Google 要求必須包含 192×192 與 512×512 兩組圖示。

與一般 Favicon 的差異：

• 尺寸更大 — 512×512 用於安裝畫面與啟動畫面
• 宣告方式不同 — 透過 manifest.json（或 .webmanifest）宣告，而非 HTML link
• 用途更廣 — 安裝圖示、啟動畫面、工作列圖示等
• Android Chrome 使用 192×192 與 512×512；iOS 忽略 manifest 圖示，仍使用 apple-touch-icon

💡 本工具產生的 ZIP 已包含 site.webmanifest 檔案，下載後直接放置於網站根目錄即可。

Favicon 尺寸極小（16×16 只有 256 像素），設計時需特別注意：

• 使用簡單的單一形狀 — Logo 縮小後細節會糊掉，應使用簡化的圖形
• 避免細線條 — 小尺寸下細線會消失，線條至少 2px 寬
• 高對比配色 — 確保在淺色與深色介面上都清晰可見
• 避免文字 — 16×16 無法閱讀文字，僅使用圖形符號
• 善用透明背景 — 但要注意某些舊瀏覽器不支援
• 上傳高解析度原圖 — 建議至少 512×512，由工具縮放產生各尺寸

可以！本工具使用 100% 純前端技術在瀏覽器中即時組裝 ICO 二進位格式：

• 使用 Canvas API 產生各尺寸的 PNG 圖像
• 將多個尺寸的 PNG 資料包裝進標準 ICO 容器（包含檔案頭與目錄區）
• 產生的 favicon.ico 完全相容 Windows、macOS 與所有主流瀏覽器

整個過程不需要任何伺服器，圖片資料不會離開您的裝置，即使是未發布的設計稿也能安心處理。

完全不會！Favicon Generator 是一個 純前端工具：

• ✅ 圖片僅在您的瀏覽器中處理，透過 FileReader 讀取後直接在記憶體中運算
• ✅ 沒有任何圖片資料被上傳或傳輸到外部伺服器
• ✅ 不需要註冊、登入或安裝任何軟體
• ✅ 產生的所有檔案（ICO、PNG、ZIP）都直接下載到您的裝置

💡 這代表即使是機密設計或未公開的品牌圖示，也可以完全放心地使用本工具處理。