favicon 是 16 到 512 像素的圖示，會出現在瀏覽器分頁、書籤和網址列中您的網頁標題旁邊。您可以從本機的 PNG、JPEG 或 WebP 圖片產生一個 favicon，做法是選擇 16 到 512 像素之間的方形尺寸、產生每個 PNG，然後把對應的 HTML link 程式碼片段貼到文件的 head 中。現代瀏覽器不再需要當初讓 favicon 獲得此名稱的 .ico 容器格式，因為它們會讀取透過標準 <link rel="icon"> 標籤所引用的方形 PNG 檔案，並挑選最符合其正在渲染表面的尺寸。簡寫「ICO」之所以還留在「favicon ico」這個詞組中，是因為早期瀏覽器會在 /favicon.ico 這個路徑下尋找單一的 Windows 圖示資源;不過現今的網頁平台會把每個像素尺寸視為獨立的圖片，所以一組命名清楚的 PNG 檔案就是實務上的現代等效方案。對於手上已經有標誌或方形符號圖檔的人來說，這樣的轉變是個好消息:您可以在瀏覽器分頁中挑選實際需要的像素尺寸，並下載每個檔案，完全不需要把原始檔案上傳到任何地方。Favicon 產生器完全在您的瀏覽器中執行，解碼您本機的圖片、將其裁切為置中的方形，並為您寫入尺寸相符的 HTML 程式碼。
為什麼「Favicon ICO」不再代表單一的 .ico 檔案
「favicon ico」中的「ICO」是 Internet Explorer 5 留下來的歷史遺物。當年的 IE5 會要求每個網站在根路徑 /favicon.ico 提供單一的 Windows 圖示資源。該容器格式可以在一個檔案內包含多種解析度，只要頁面沒有宣告自己的 <link rel="icon"> 標籤，瀏覽器就會回退使用它。WHATWG HTML 標準現在定義了 rel="icon" 關係，讓頁面可以指向任何圖片資源，包括 PNG、SVG 和動畫格式，而現代瀏覽器會優先採用這些宣告。根據 MDN rel icon 參考資料，瀏覽器會依照文件順序逐一檢視已宣告的圖示連結，並挑選最符合其正在繪製表面的那一個，這也是為什麼許多正式上線的網站會同時列出多個尺寸。實際上，這代表一組命名為 favicon-16x16.png、favicon-32x32.png 等的方形 PNG 檔案可以達成舊版 /favicon.ico 的相同工作，而且渲染更銳利、編輯更容易。
挑選能通過置中方形裁切的來源圖片
favicon 能容納的細節非常有限，因此來源圖片的構圖比檔案格式更為關鍵。Favicon 產生器採用中央封面式裁切:它會從圖片中央取出盡可能大的方形，然後將該方形縮放至每個要求的輸出尺寸。橫向圖片會從左右兩側等量裁掉部分內容，而直向圖片則會從上下兩側等量裁掉。方形的來源圖片則完全不會被裁切。這個可預測的規則對於標誌、符號、文字字母組合，以及主體本就靠近中央的插圖來說非常實用。但它並非互動式的裁切編輯器，所以當主體刻意偏離中央時，您應該先使用圖片裁切工具修正構圖，再用重新構圖後的檔案回到 Favicon 產生器。PNG 和 WebP 來源可以讓透明度一路保留到輸出結果，所以透明背景上的標誌在每個輸出尺寸下都能保持透明。JPEG 來源一開始就沒有透明像素，因此 JPEG 標誌會以不透明的方形呈現。如果原始圖片有透明邊緣或淺色邊緣，請同時在淺色和深色背景下檢視輸出結果，因為這個工具本身不會新增或移除透明度。
從本機圖片產生方形 PNG Favicon
在瀏覽器分頁中開啟 Favicon 產生器。整個工作流程都在本機執行:您的檔案會在分頁中解碼，絕不會被上傳，每個圖示都會以 Canvas 在其精確要求的尺寸下繪製。
- 選擇主體靠近中央的 PNG、JPEG 或 WebP 圖片。點選檔案輸入欄位，從您的裝置中選擇來源檔。這個工具接受最大 25 MB 的 PNG、JPEG 和 WebP 檔案，並會在配置輸出畫布之前，先行拒絕解碼像素超過約 4000 萬以上的圖片，所以即使是壓縮檔案大小看似很小的超高解析度照片也會失敗。
- 選擇您需要的方形 PNG 尺寸並產生 favicon 檔案。勾選 16、32、48、64、128、256 及/或 512 像素的輸出。每個選取的檔案都會根據解碼後的來源，在其要求的自然尺寸下獨立渲染，所以 32×32 的下載檔案是貨真價實的 32×32 PNG，而不是縮小過的預覽圖。
- 檢視並下載每個圖示，然後把對應的 HTML link 程式碼片段複製到您的網站中。在影像檢視器中以 100% 縮放開啟最小的下載檔案，確認主體在該尺寸下仍然清晰可辨;點選每個下載連結將 PNG 儲存到您的專案中，然後複製工具在該尺寸旁邊寫出的對應 <link rel="icon"> 程式碼。
每個產生的檔名都遵循一致的命名規則，這在您上傳檔案時非常方便。請求 32 像素輸出會產生 favicon-32x32.png，請求 256 像素輸出會產生 favicon-256x256.png，以此類推。請將下載的檔案放到程式碼片段預設的根路徑，或編輯每個 href 以符合您實際使用的目錄，接著把對應的 <link> 標籤放進頁面的 <head> 中。
| 像素尺寸 | 產生的檔名 | 典型的瀏覽器或裝置表面 |
|---|---|---|
| 16×16 | favicon-16x16.png | 傳統瀏覽器分頁的回退尺寸，以及非常小的書籤表面 |
| 32×32 | favicon-32x32.png | 標準瀏覽器分頁、網址列和現代書籤列表 |
| 48×48 | favicon-48x48.png | 舊版 Windows 網站圖示和較大的書籤縮圖 |
| 64×64 | favicon-64x64.png | 高 DPI 分頁和側邊欄情境 |
| 128×128 | favicon-128x128.png | macOS 釘選分頁和密集的書籤列 |
| 256×256 | favicon-256x256.png | 高 DPI 桌面捷徑和大尺寸縮圖表面 |
| 512×512 | favicon-512x512.png | 供進一步縮放或平台工具使用的原生匯出 |
解讀工具寫出的 HTML Link 程式碼片段
每個要求的尺寸都會對應自己的 <link> 程式碼，該程式碼是根據標準的 rel icon 關係所建立。典型的程式碼片段看起來像這樣:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
這段程式碼中有三個部分值得注意。rel="icon" 屬性值告訴瀏覽器這是圖示資源，而不是樣式表或預載提示。type="image/png" 屬性對應工具實際匯出的檔案 MIME 類型，因為每個結果都是 Canvas toBlob API 所產生的 image/png Blob。sizes="32x32" 這個值告訴瀏覽器該檔案的自然像素尺寸，瀏覽器就是依此決定哪一個已宣告的圖示適合給定的表面。href 預設為根目錄相對路徑，所以 /favicon-32x32.png 代表該檔案位於您網域的根目錄。如果您將資產存放在像 /assets/icons/ 這類資料夾中，請將每一行的 href 改為符合該路徑。只複製您實際打算上傳之尺寸的程式碼;其他未複製的部分不會影響頁面的其餘運作。當您備妥檔案後，如需完整的部署逐步說明，在您的網站上設定 favicon 指南會更詳細地介紹對應的伺服器路徑和 head 區段的擺放位置。
現代 PNG Favicon 在哪些地方有效(以及 ICO 仍會出現的地方)
現代的 Chromium、Firefox 和基於 Safari 的瀏覽器全都接受以 rel="icon" 宣告的 PNG 圖示，而且每個瀏覽器都會挑選最符合其正在渲染表面的尺寸，這就是為什麼一次產生多種尺寸是實用的做法。Favicon 產生器的輸出在這個情境下表現良好:它會產生可選的 PNG 尺寸、為每個尺寸寫入正確的 MIME 類型和 sizes 值，並讓檔名與程式碼片段保持一致。這個工具的功能範圍刻意設定得很窄:它不會產生 .ico 容器檔案、SVG 圖示、Apple touch icon、Android adaptive icon 組合、釘選分頁資產、網頁應用程式 manifest，或特定平台的套件。如果您的部署需要上述任何一項，就必須在 PNG 組合之外另行製作。對大多數內容網站、部落格、文件入口網站和小型網頁應用程式來說，PNG 尺寸加上對應的 HTML 程式碼就已足夠，可以在完全不碰舊版 /favicon.ico 端點的情況下，填滿瀏覽器分頁、書籤和多數網址列表面。
修正小尺寸 Favicon 的常見問題
有三個問題經常出現，值得提前規劃。第一，極小的圖示會讓細線和小字變得模糊，因為瀏覽器在最後縮放時會對像素進行平滑處理。解決方法是先在 100% 縮放下檢視 16 和 32 像素的下載檔案，確認主體在該尺寸下仍然清晰可辨，然後再發布。第二，重要的細節可能落在中央方形之外，導致裁切後消失。中央封面式規則會從較長的那一邊取走等量的邊界，所以偏離中央的標誌會失去本來就靠近邊緣的那一側。請先在圖片裁切工具中重新構圖，將其存成方形，然後用重新構圖後的檔案重新執行 favicon 工作流程。第三，在您上傳新檔案之後，舊圖示仍可能繼續出現在瀏覽器分頁中。瀏覽器會積極地快取 favicon，所以請清除瀏覽器快取、關閉並重新開啟分頁，或使用無痕視窗來驗證已部署的圖示。這個工具只負責準備資產和標記;它不會修改您的網站、上傳檔案，或確認正式環境的快取行為，所以部署後進行快速目視檢查也是工作流程的一部分。
延伸閱讀:圖片色彩擷取工具的替代方案:一款本機瀏覽器工具。