工具會產生什麼
這個產生器會把一張圖片轉換成完整、現代的 favicon 套件 ——
包含相容舊版瀏覽器的多尺寸 .ico、16 / 32 / 180 / 192 / 512 的
PNG 版本、可選的原始 .svg、給 PWA 使用的 site.webmanifest,
以及可直接貼入 <head> 的 HTML 程式碼片段。每一個位元組都在你的
瀏覽器中產生;不上傳、不經過伺服器、沒有分析追蹤。
套件內容
favicon.ico—— 多重影像格式(16 / 32 / 48),用於瀏覽器分頁、書籤 以及舊版 Windows 捷徑。favicon-16x16.png與favicon-32x32.png—— 目前瀏覽器使用的現代 PNG 版本。favicon.svg—— 只有當來源圖片為 SVG 且「使用原始 SVG」開關開啟 時才會包含。apple-touch-icon.png—— 180×180、不透明,用於 iOS 主畫面。pwa-192x192.png與pwa-512x512.png—— 標準的 PWA 圖示。pwa-maskable-192x192.png與pwa-maskable-512x512.png—— 採用 W3C 建議安全區域的可遮罩版本。site.webmanifest—— 連結至上述圖示的 PWA 資訊清單。
內距、背景與可遮罩安全區域的運作方式
每個平台都有自己的內距(「邊距」),讓你在圖示畫布內保留一些 留白空間。「加上背景」開關會在來源圖片後方繪製一個不透明方塊 —— 當來源為透明而目的地需要不透明(例如 Apple 主畫面)時非常實用, 也可單純用於在瀏覽器分頁中強化視覺對比。可遮罩的 PWA 圖示會在 平台邊距之上額外加上一個安全區域:中央約 80% 以外的部分,在 Android、Windows 或 ChromeOS 套用圓形、圓角或方圓形(squircle) 遮罩時可能會被裁切。
將套件接到你的網站
- 將下載的壓縮檔解壓縮到網站根目錄(讓檔案位於
/favicon.ico、/site.webmanifest等路徑)。 - 將 HTML 程式碼片段貼到網站的
<head>中。 - 如果你從子路徑提供資源(例如
/static/icons/),請在產生 之前先設定「資源路徑」,讓程式碼片段與資訊清單使用正確的 URL。 - 如果你在這個工具提供的選項之外另外自訂了資訊清單(例如
要加入
categories或screenshots),請用文字編輯器開啟site.webmanifest直接修改 —— 它就是純文字的 JSON。