您可以在瀏覽器中產生一個可用的 favicon.ico 設定，方法是匯出精確尺寸的 PNG 圖示並加上標準的 HTML 標籤——現代瀏覽器會將這視為對舊版 .ico 容器的完整替代方案。傳統的 favicon.ico 是放置在網站根目錄的單一多解析度 Windows 圖示檔案，至今仍受到每一款出貨的瀏覽器支援，但同樣的瀏覽器也接受在文件 head 中以 rel="icon" 宣告的 PNG。這項轉變意味著，只要您以正確的 PNG 尺寸搭配正確的 link 程式碼片段發布，就完全不需要 ICO 容器。Favicon Generator 正好處理這個工作流程：它在您的瀏覽器分頁中解碼本機影像、將其中心裁切為正方形、將您挑選的每個尺寸分別渲染為獨立的 image/png 檔案，並寫入帶有正確 sizes 權杖的對應 HTML link 元素。整個管線都在本機執行，您的原始檔案永遠不會被上傳，且輸出檔名格式是可預測的，因此標記和資產在磁碟上會保持對齊。本指南的其餘部分將逐步說明準備工作、逐步點擊的操作步驟，以及防止部署後殘留過時圖示的一小組發布檢查項目。
為何 PNG 組合可取代舊版 .ico 容器
Internet Explorer 5 和最初的 favicon 規格要求一個 .ico 檔案，其中包含封裝在單一 Windows 圖示容器中的 16×16、32×32 和 48×48 影像。瀏覽器仍會依慣例擷取 /favicon.ico，這就是為什麼該檔名幾乎出現在每一篇較舊的教學中。然而，現代瀏覽器接受在文件 head 中以 rel="icon" 宣告的 PNG，且在相同視覺品質下，單一正方形 PNG 通常比多解析度的 .ico 更小。WHATWG HTML 標準將 rel="icon" 列為用於連結代表 favicon 之外部資源的關係，而 MDN rel icon 參考資料 也證實瀏覽器會從您提供的任意數量 rel="icon" 連結中挑選合適的資源。
這就是為何以 PNG 為基礎的工作流程能產生完整的 favicon.ico 替代方案：在 head 中找到明確標籤的瀏覽器會忽略其隱含的 /favicon.ico 請求，改為提供您其中一個具名 PNG。瀏覽器行為會因介面而異，且本工具並不保證任何特定瀏覽器、書籤介面或作業系統會顯示哪個尺寸。剩下的注意事項在於平台特定資產——Apple touch 圖示、Android manifest 圖示、pinned-tab SVG，以及打包的應用程式圖示——因為這些使用獨立的詮釋資料檔案，刻意落在純瀏覽器 PNG favicon 產生器的範疇之外。
準備一張在 16 像素下仍清晰可讀的來源影像
favicon 在瀏覽器分頁和書籤列中會被渲染為最小 16×16 像素，這遠比大多數標誌所預期的空間更小。請從一張主要主體靠近畫面中心、且輪廓在縮圖尺寸下仍能辨識的影像開始：單一字母、簡單符號、幾何標記，或高對比度的插畫。產生器會套用置中的封面裁切：從來源正中間取出最大的正方形，再將該正方形縮放至各個要求的輸出尺寸。橫向圖片會在左右兩側等量裁切，直向圖片會在上下兩側等量裁切，正方形來源則完全不會裁切。每次執行的規則都相同，這對可預測的標誌很有用，但當主體刻意偏離中心時就會受限。
如果主體偏在畫面一側，請在載入檔案前先將其預先裁切為置中的正方形，因為本工具並非互動式裁切編輯器。透明或淡色邊緣也很重要，因為本工具不會自動移除或新增背景：PNG 和 WebP 來源可以保留其既有透明度，JPEG 來源一開始就沒有任何透明像素，因此產生的圖示在發布前應同時在淺色與深色背景上檢視。輸入檔案必須是靜態 PNG、JPEG 或 WebP 檔案，最大 25 MB，解碼後的像素預算為 4000 萬像素。刻意排除動畫輸入與 SVG，以避免可執行的向量內容和不明確的影格選擇，因此被拒絕的來源必須先轉換為支援的靜態點陣格式。
依序產生 Favicon 檔案
- 在目前的瀏覽器分頁中開啟 Favicon Generator；無需安裝任何軟體，也不需要帳號。
- 選擇一張主要主體靠近畫面中心的 PNG、JPEG 或 WebP 來源檔案。
- 從可用的勾選框中挑選您需要的正方形像素尺寸：16、32、48、64、128、256 和 512。
- 產生圖示。每個選定的尺寸都會以其精確的自然尺寸獨立渲染，並匯出為 image/png Blob，檔名格式如 favicon-32x32.png。
- 先檢視最小的預覽——以 100% 縮放開啟 16 和 32 像素的檔案，確認主體可辨識且未被中心裁切切掉。
- 下載您要發布的每個圖示。預覽僅供視覺參考；下載的檔案永遠是該連結所指定的精確尺寸。
- 複製您實際下載之尺寸的 HTML link 程式碼片段。每個片段都使用標準的 rel="icon" 關係、image/png 類型、正方形 sizes 權杖，以及相對於根目錄的檔名。
- 將 PNG 檔案上傳至網站上對應的路徑（或將每個 href 編輯為您實際的資產目錄），然後將選擇的 link 行貼入文件 head。
- 重新載入已部署的頁面，透過檢視原始碼確認新的標籤，若仍出現舊圖示則清除瀏覽器快取。
輸出尺寸及各尺寸的用途
產生器提供固定的正方形尺寸清單可供選擇。每一個都會從同一個解碼後的來源以其各自的自然尺寸渲染，而不是從單一縮放後的預覽重複使用，因此發布的檔案永遠是下載連結所標示的尺寸。
| 正方形尺寸（px） | 典型顯示介面 |
|---|---|
| 16 | 瀏覽器分頁、網址列書籤文字 |
| 32 | 工作列捷徑、高 DPI 分頁、retina 螢幕上的書籤列圖示 |
| 48 | Windows 網站捷徑、舊版桌面磚塊 |
| 64 | 密集的書籤選單與側邊面板 |
| 128 | 網路商店風格的介面與較大的書籤磚塊 |
| 256 | macOS Dock 預覽與大型捷徑介面 |
| 512 | 高解析度捷徑磚塊與大型參考渲染圖 |
大多數小型網站只發布 16 和 32，因為這兩個尺寸已涵蓋分頁與高 DPI 分頁。較大的尺寸組合在 Windows 和 macOS 介面上很有用，這些介面會出現 48、64 或 256 像素的磚塊，而 512 的匯出同時也可作為清晰的主資產，日後若設計需要變更可再行縮放。
解讀工具提供的 HTML 程式碼片段
您選擇的每個尺寸都會產生相同格式的 link 行。rel、type、sizes 和 href 屬性遵循 WHATWG HTML 標準的 rel="icon" 關係，並與 MDN rel icon 參考資料一致，因此該標記可在各瀏覽器間直接移植，無需修改。
| 屬性 | 片段中的值 | 用途 |
|---|---|---|
| rel | icon | 將該資源宣告為 favicon |
| type | image/png | 告訴瀏覽器所連結檔案的 MIME 類型 |
| sizes | 16x16, 32x32, … | 該特定檔案的正方形尺寸，與其檔名相符 |
| href | /favicon-32x32.png | 相對於根目錄的資產路徑；若將圖示存放在別處，請加以編輯 |
僅複製您實際放置於網站上之檔案對應的程式碼行，將其貼入每個應顯示該圖示之頁面的 head 中，並讓每個 href 與實際上傳路徑保持一致。多個圖示連結可讓瀏覽器挑選最佳資源，但最終選擇屬於瀏覽器行為——請勿假設特定作業系統或書籤介面會使用特定尺寸。
上線前的部署檢查清單
請將 Favicon Generator 視為更廣泛工作流程中的資產與標記階段，然後在發布前執行一份簡短的檢查清單。確認每個下載的 PNG 都能獨立開啟，並在 100% 縮放下正確呈現，特別是 16 和 32 像素的檔案。將每行 link 對應到您實際上傳的檔案；若將圖示存放在網站根目錄之外，請編輯每個片段的 href——只要檔案可達，使用相對路徑或絕對路徑皆可。重新載入已部署的頁面，開啟檢視原始碼，確認新的 link rel="icon" 標籤已帶著正確的 sizes 權杖出現在 head 中。若瀏覽器分頁或書籤列中仍顯示舊圖示，請清除網站資料與瀏覽器快取；瀏覽器會積極快取 favicon，在快取清除前會忽略新檔案。最後，請同時在淺色與深色的瀏覽器介面上預覽圖示，因為淡色或透明邊緣在兩者下的呈現會有所不同。
為何 Favicon 可能看起來模糊或一直停留在快取中
有兩個問題會造成大部分部署後的困惑。第一個是縮放：瀏覽器在調整大小時會平滑像素，因此即使來源很銳利，非常小的圖示仍會使細線和小字變得柔和。解決方法在上游——使用對比強烈、形狀粗獷的標誌，並在發布前以 100% 縮放開啟 16 像素的匯出檔。第二個是快取：瀏覽器會積極保存 favicon，通常跨重新啟動，因此新部署的圖示在網站資料清除或執行強制重新載入前都不會出現。請在私密視窗中測試，或在停用快取的情況下強制重新整理，以確認新資產確實送達瀏覽器。本工具本身不會修改您的網站、不會上傳任何檔案，也無法控制實際環境的快取行為——它只負責準備資產與標記，發布步驟仍由您自行完成。
相關閱讀：為電子郵件附件的 PNG 加上背景。
相關閱讀：如何為您的網站設定 Favicon。