Favicon 生成器｜一鍵生成多尺寸 ICO 與 PNG
上傳圖片並裁剪為正方形，即可生成內含多個尺寸（16、32、48px 等）的 favicon.ico 與全套 PNG。支援 Lanczos 高品質縮小演算法，並自動生成可直接貼上的 HTML 程式碼。全程在瀏覽器內處理，圖片不會上傳至伺服器。
Favicon 的指定方法（分模式）
Favicon 的寫法取決於「打算支援到什麼程度」。以下按用途整理了從最小配置到 PWA、深色模式適配所需的寫法。所有程式碼均以將生成的檔案放在網站根目錄為前提。
模式1：最小配置（只放 favicon.ico）
不在 HTML 中寫任何一行，只把 /favicon.ico 放到文件根目錄即可。瀏覽器會隱式查詢該路徑，因此這樣就能顯示。
your-site/
└── favicon.ico ← 放在這裡即可（無需在 HTML 中書寫）
<!-- 若要顯式宣告，僅這一行就夠了 -->
<link rel="icon" href="/favicon.ico" sizes="any">| 適用場景 | 個人網站、內部工具，以及「只要能顯示就行」的場合 |
|---|---|
| 補充說明 | 加上 sizes="any" 後，即使日後追加 SVG 或 PNG，瀏覽器也能正確判斷「ICO 是最後的備選」。建議在 ICO 中內含 16、32、48px。 |
模式2：標準配置（推薦）
在 ICO 之外再準備 PNG 與 Apple Touch Icon，是目前最常見的配置。從桌面瀏覽器到 iOS 新增到主螢幕都能覆蓋。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">| 適用場景 | 企業官網、部落格、媒體等一般 Web 站點 |
|---|---|
| 補充說明 | apple-touch-icon 的透明部分會被填充為黑色，請務必輸出帶背景色的不透明 PNG。iOS 側會以圓角裁切，留出一成左右的留白可避免邊緣被切掉。 |
模式3：PWA 完整配置
新增到主屏幕後能像應用一樣啟動的 PWA，需要在 site.webmanifest 中登記圖示。若 192px 與 512px 未同時齊備，則不會被判定為可安裝。
<!-- HTML（head 內） -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- site.webmanifest -->
{
"name": "My Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| 適用場景 | PWA、Web 應用，以及以手機使用為主的服務 |
|---|---|
| 補充說明 | iOS 不會參照 manifest 中的圖示，因此仍需另行書寫 apple-touch-icon。display: "standalone" 表示隱藏瀏覽器介面、以應用風格啟動。 |
模式4：SVG Favicon + 深色模式適配
SVG favicon 與解析度無關，並可通過 SVG 內的 CSS 切換深色模式下的顏色。為不支援的瀏覽器一併宣告 ICO 與 PNG。
<!-- HTML（head 內）。瀏覽器會自上而下採用「能讀懂的那個」 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg（深色模式下反轉顏色的示例） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| 適用場景 | 能夠準備向量 Logo 的站點，或希望在深色模式下改變觀感的場合 |
|---|---|
| 補充說明 | SVG favicon 已獲 Chrome、Firefox、Edge 支援。Safari 目前不讀取 rel="icon" 的 SVG，因此 PNG、ICO 的回退方案必不可少。 |
模式5：子目錄放置與快取更新
圖示放在根目錄以外時的寫法，以及替換後仍顯示舊圖示時的處理。Favicon 會被瀏覽器牢牢快取，改變 URL 是最可靠的辦法。
<!-- 放在任意目錄時需要顯式寫明路徑 -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- 在子目錄下公開的站點（例如 /docs/）請注意絕對路徑 -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| 適用場景 | CDN 分發、統一管理靜態資源的站點，以及替換圖示時 |
|---|---|
| 補充說明 | 唯獨把 /favicon.ico 放在根目錄的隱式查詢無法改變路徑，因此即便放在子目錄，也建議在根目錄留一份副本，以免遺漏。 |
檔案與顯示位置的對應關係
下表列出各檔案分別用在何處。並非全部都要準備，可按需支援的環境自行選擇。
| 檔案 | 尺寸 | 使用場景 |
|---|---|---|
| favicon.ico | 16 / 32 / 48px | 瀏覽器標籤頁、書籤、Windows 工作列。即使 HTML 中無宣告也會查詢根目錄 |
| favicon-16x16.png | 16×16 | 瀏覽器標籤頁（標準解析度顯示器） |
| favicon-32x32.png | 32×32 | 瀏覽器標籤頁（Retina 等高解析度顯示器）、書籤欄 |
| apple-touch-icon.png | 180×180 | 新增到 iOS / iPadOS 主螢幕時的圖示。透明部分會被填充為黑色 |
| android-chrome-192x192.png | 192×192 | Android 主螢幕圖示（經由 manifest） |
| android-chrome-512x512.png | 512×512 | PWA 啟動畫面與應用列表（經由 manifest） |
| site.webmanifest | — | PWA 的配置檔案，用於宣告圖示、主題色與啟動方式 |
| favicon.svg | 可變 | Chrome、Firefox、Edge。可實現深色模式下的配色切換 |
使用技巧
- 建議準備 512×512px 以上的正方形原圖，這樣即使縮小到 16px 輪廓也不會崩壞。非正方形的圖片可以用本工具的裁剪功能，只擷取需要的正方形區域。
- Lanczos3 在對相鄰畫素加權平均的同時，利用卷積核的負瓣提升邊緣對比度。相比瀏覽器內建的縮放能保留更多輪廓，對含有文字或 Logo 的圖示差異尤為明顯。
- ICO 最大的特點是可在一個檔案中內含多個尺寸。只要放入 16、32、48px，標籤頁、書籤欄、Windows 工作列就會各自選用最合適的影像。
- Apple Touch Icon 的透明部分會被填充為黑色，因此建議指定背景色並輸出為不透明的 PNG。留白設為 10% 左右，還能避免 iOS 的圓角遮罩裁掉邊緣。
- 瀏覽器對 favicon 的快取非常頑固。替換後若未生效，可在 URL 後附加
?v=2之類的查詢引數，或執行強制重新整理。
常見問題
/favicon.ico 至今仍是瀏覽器在沒有任何 HTML 宣告時也會隱式查詢的路徑。RSS 閱讀器、書籤服務以及部分爬蟲不會解析 HTML，只會直接抓取根目錄下的 ICO，因此一併放置 ICO 才不會有遺漏。<link rel="icon" type="image/svg+xml"> 引用。同時寫上本工具生成的 ICO 與 PNG 作為回退方案最為穩妥。
閒話 ― 在 16 畫素上作畫這道難題
1999 年，Internet Explorer 5 實現了在收藏夾中為書籤顯示小圖示的功能。機制質樸得可愛：只要把 favicon.ico 放到網站根目錄就會被抓取。「favicon」這個稱呼正是「favorite icon」的縮寫。<link rel="icon"> 正式寫入 HTML 規範則是後來的事，而隱式查詢根目錄 ICO 的行為，至今仍作為向後相容保留了下來。
ICO 借用 Windows 圖示格式這一點，結果具有重大意義。這種格式可在單個檔案中內含多種解析度，也就意味著 16px 的標籤頁與 48px 的工作列可以顯示完全不同的圖案。這不只是便利性的問題。在 16×16 這樣極小的畫布上，把為 48px 設計的圖案機械縮小，細線會消失、文字會無法辨認。當年的圖示設計師之所以逐個尺寸手工繪製，正因為那是唯一的解決辦法。
現代的 favicon 生成則以「如何聰明地縮小」取代了手工繪製。單純的平均（雙線性）會損失邊緣對比度，而抽樣（最近鄰）則會整根丟掉細線。Lanczos 法使用將 sinc 函式截斷為有限個瓣的卷積核，主瓣保留原始資訊，兩側的負瓣則把邊緣頂起來。這種「略微強調輪廓」的特性，在小圖示上效果尤為突出。
此後 favicon 的需求還在不斷增加。2007 年 iPhone 登場帶來了 Apple Touch Icon（最初 57px，如今 180px），PWA 的普及又要求 192px 與 512px，如今連 SVG favicon 與深色模式適配也進入了視野。與只放一個檔案的時代相比確實繁瑣，但反過來說，瀏覽器標籤頁上那幾十個畫素，正是被無數使用者日日看見的地方。