文章
從 PNG 製作 Favicon
Favicon 是瀏覽器在分頁、書籤和歷史記錄列表中顯示的小型圖形。製作好它涉及的不只是調整 logo 的大小：.ico 格式將多種解析度打包到一個檔案中，現代瀏覽器偏好 PNG，行動裝置有自己的 apple-touch-icon，網頁應用程式清單需要自己的圖示集。本文介紹每個部分，並說明如何從單一源 PNG 製作整套圖示。
什麼是 favicon，瀏覽器在哪裡使用它
favicon 是「favorite icon」的縮寫。瀏覽器最初在 Internet Explorer 5（1999 年）的地址欄中顯示它，後來將其用於書籤。如今它出現在瀏覽器分頁、書籤工具列、瀏覽歷史記錄、某些瀏覽器的新分頁頁面，以及網站被釘選時的作業系統工作列。在行動裝置上，如果用戶將網站添加到主畫面，設備會使用一個相關但不同的圖像，稱為 apple-touch-icon，而非標準 favicon。搜尋引擎有時在其介面的結果旁顯示 favicon。這個圖形在設計上很小，這使它能有效地快速視覺識別，但也難以製作得好：在 16x16 像素時，精細的 logo 會變成難以辨認的模糊圖像。favicon 檔案本身在過去幾十年間經歷了幾種格式，.ico 仍然是相容性最廣的，PNG 現在是大多數瀏覽器的現代預設格式。
.ico 容器：一個檔案中的多種解析度
.ico 格式是一個容器，而非單一圖像。單一 .ico 檔案可以容納多個不同解析度的點陣圖圖像，每個圖像作為獨立條目儲存在檔案開頭的索引中。三個最常見的尺寸是 16x16、32x32 和 48x48 像素。當 Windows 在 Explorer 或工作列中顯示 favicon 時，它會選擇最符合顯示環境的條目。舊版 Windows 需要 48x48 條目用於高密度工作列插槽。瀏覽器在分頁中以 16x16 請求 favicon，但如果檢測到更高密度的顯示器，可能會使用更大的條目。將所有三種尺寸打包到一個 .ico 檔案中，意味著單次 HTTP 請求可以涵蓋所有使用情境。將它們作為獨立的 PNG 分發也是有效的，但需要額外的 link 標籤並增加 HTTP 請求。.ico 檔案內部的圖像是標準的 BMP 或 PNG 資料，因此容器每個條目只增加少量標頭開銷。
為極小尺寸設計：簡化標誌
在 16x16 像素時，您總共有 256 個像素。帶有字標或精細細節的典型 logo 在該尺寸下變得難以辨認。標準做法是創建一個簡化的標誌：一個字母、一個抽象形狀或一個不依賴細節就能代表品牌的圖示。需要預料到的幾個具體問題：細線條在小尺寸下，尤其是在非視網膜螢幕上，會完全消失。字母組合和負空間細節會合併成灰色雜訊。漸變效果幾乎不可見。標誌與其背景之間的高對比度是清晰度的最重要因素。在純色背景上的實心形狀在 16x16 時幾乎總是比精細插圖更易辨認。32x32 和 48x48 尺寸更為寬容，可以支持更多細節，但 16x16 版本應被視為約束性限制。如果標誌在 16x16 時仍然無法辨認，設計需要進一步簡化。
現代完整集合：.ico、PNG 圖示、apple-touch-icon、清單和 HTML link 標籤
目前，一個公開網站的完整 favicon 設置需要五樣東西。首先，在網站根目錄放置一個 favicon.ico（瀏覽器直接請求 /favicon.ico 而不需要 link 標籤作為備用）。其次，用於現代桌面瀏覽器的 32x32 PNG，以 link 標籤聲明：`<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`。第三，用於分頁尺寸的 16x16 PNG：`<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`。第四，用於 iOS 主畫面書籤的 180x180 像素 apple-touch-icon：`<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`。第五，帶有 192x192 和 512x512 PNG 的網頁應用程式清單（site.webmanifest），用於 Android 和漸進式網頁應用程式。PNG 和 .ico 中的 PNG 編碼條目支持透明度，但 apple-touch-icon 應該有不透明的背景，因為 iOS 會忽略 alpha 通道，並將透明區域填充為黑色。
在本地完成：favicon-generator 將您的圖像保留在裝置上
本網站的 favicon-generator 接受 PNG 並產生完整套件：打包了 16x16、32x32 和 48x48 條目的多解析度 favicon.ico、用於直接 link 標籤使用的各個 PNG 尺寸，以及 180x180 的 apple-touch-icon。所有這些都在您的瀏覽器中使用 Canvas API 和 JavaScript .ico 編碼器完成。您的源圖像從不上傳到任何地方；它保留在您的裝置上。當源檔案是公司 logo 或任何在您控制其去向之前不應離開機器的資產時，這一點很重要。每個產生的檔案都會以慣例檔名個別提供下載。您將它們複製到網站的根目錄，並在 HTML head 中新增對應的 link 標籤。如果您的源 logo 有精細細節在 16x16 渲染中無法保留，您可以在放入生成器之前裁剪或簡化它，或者提供一個專門為 favicon 準備的不同源圖像。
本文涉及的工具
常見問題
如果我已聲明 PNG link 標籤，還需要 favicon.ico 嗎？
需要，原因有兩個。首先，不讀取 HTML 的瀏覽器（網路爬蟲、RSS 閱讀器、一些舊版行動瀏覽器）直接在域名根目錄查找 /favicon.ico。如果該檔案不存在，它們會在每次頁面載入時產生 404 請求，這為您的伺服器日誌增加雜訊，並增加一個小的不必要的來回請求。其次，舊版 Internet Explorer 只識別 .ico 格式，會忽略 PNG link 標籤。同時提供兩者可以涵蓋所有情況。
我可以使用 SVG 作為 favicon 嗎？
Chrome 和 Firefox 透過 `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` 支援 SVG favicon。Safari 不支援 SVG favicon。由於 SVG favicon 與解析度無關，它們在任何顯示密度下都顯示清晰，包括視網膜螢幕，無需多個尺寸變體。實際建議是為支援它的瀏覽器聲明 SVG link 標籤，同時仍然包含 .ico 備用以實現完整覆蓋。SVG favicon 還可以包含 `prefers-color-scheme` 媒體查詢，以自動在亮色和深色版本之間切換。
我應該從什麼圖像開始才能獲得最佳結果？
帶有透明背景的 512x512 或更大的方形 PNG 提供最大的靈活性。從大尺寸開始縮小比從小圖像開始保留更多細節。如果您的主要 logo 包含字標，請考慮準備一個只顯示圖示或標誌的簡化版本，因為無論源解析度如何，文字在 16x16 時都無法辨認。標誌與其背景之間的高對比度是小尺寸是否清晰易辨的最可靠預測因素。