Favicon 產生器

範例

icon.png（頁面生成，512×512 紅色圓角方塊與字母 D）· 應用名稱 Dayeku Demo · 主題色 #a01e2b

favicon.zip：favicon.ico（16 / 32 / 48）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest

把這些文件放到網站根目錄，再把生成的 HTML 代碼粘貼到每個頁面的 <head> 中即可。文件名與代碼中的路徑一一對應。

技術細節與邊界

每個尺寸都從原圖單獨縮放（縮小超過 2 倍時逐級減半），按邊距等比放進正方形。favicon.ico 由頁面自行組裝：6 字節文件頭、每個尺寸 16 字節目錄項，圖像以 32 位 PNG 形式嵌入，Windows Vista 起及現代瀏覽器都支持。180×180 的 Apple 圖標始終填充背景色且不裁圓角，因為部分 iOS 版本會把透明區域顯示為黑色，並會自行添加圓角遮罩。manifest 只寫入 192 與 512 兩個尺寸。

關於此工具

用一張 PNG、JPG、WebP 或 SVG 圖片生成網站圖標全套文件：包含 16、32、48 像素的 favicon.ico，16 / 32 像素 PNG，180 像素 apple-touch-icon，192 和 512 像素的 PWA 圖標，site.webmanifest，以及可直接粘貼到 <head> 的 HTML 代碼；SVG 源文件還會附帶 favicon.svg。可設置邊距、圓角、背景色、應用名稱和主題色，打包為 ZIP 下載，圖片不上傳。

操作步驟

1. 拖入、點擊選擇或粘貼一張圖片，推薦正方形、至少 512×512 的 PNG 或 SVG。
2. 按需調整邊距、圓角、背景色，並填寫應用名稱和主題色。
3. 下載 ZIP，把文件放到網站根目錄，並複製 HTML 代碼到 <head>。

輸入 / 輸出說明

輸入

一張 JPEG、PNG、WebP、AVIF、BMP、GIF 或 SVG 圖片，不超過 50 MB；非正方形圖片會等比放入並留白。

輸出

ZIP 包內含 favicon.ico、5 個 PNG、site.webmanifest（SVG 源時另含 favicon.svg），以及 HTML 代碼。

限制

不生成 Windows 磁貼、Safari 固定標籤頁單色圖標等舊式文件；不檢查線上網站當前使用的圖標。

注意事項

16×16 只有 256 個像素，細節和小字會難以辨認，建議使用簡潔、高對比度的圖形。瀏覽器會緩存 favicon，替換後可能需要強制刷新才能看到。

常見問題

網站 favicon 需要準備哪些尺寸？

通常需要：含 16、32、48 像素的 ICO，180 像素 Apple 圖標，192 與 512 像素 PWA 圖標。這裡一次生成全部文件和 HTML 代碼，SVG 源圖另附矢量版。

生成的 favicon.ico 里包含哪些尺寸？

包含 16×16、32×32、48×48 三個尺寸，都以帶透明通道的 32 位 PNG 嵌入。結構為 6 字節文件頭加每個尺寸 16 字節目錄項，Windows Vista 起及現代瀏覽器都能識別。

為甚麼 iPhone 主屏幕圖標出現黑色背景？

部分 iOS 版本會把 Apple 圖標的透明區域顯示為黑色。本頁 180×180 圖標始終用背景色填滿且不裁圓角，iOS 會自行加圓角遮罩；默認背景為白色 #ffffff，可改為品牌色。

相關工具

• 圖片尺寸調整 按寬高、百分比或最長邊批次縮放圖片，可裁切填滿或留白，不上傳
• 圖片 Base64 互轉 圖片轉 Base64、Data URI、CSS 或 HTML 程式碼，也可把 Base64 還原成圖片下載