若要在 Chrome 中為網站設定 favicon，你需要從本機圖片產生正方形的 PNG 圖示、儲存到伺服器上，並在文件 head 區段加入對應的 rel=icon link 標籤 — Chrome 接著會在分頁列、書籤列和歷史紀錄中顯示所選的圖示。「favicon」這個詞只是指 Chrome 在頁面標題旁顯示的小圖示，無論在桌面、Android 或 iOS 上，瀏覽器的選擇方式都相同。多數讀者是在某個喜歡的網站上看到 favicon，進而好奇如何把類似的標誌放到自己的頁面上，而實際可行的做法是自行建立，而非複製其他網站的檔案，因為複製並不會轉移所有權或授權權利。Chrome 透過一般的 HTTP 請求來尋找圖示，因此任何能產生可存取 PNG 檔案並搭配正確 link 元素的設定都能運作。Favicon Generator 完全在瀏覽器分頁內處理檔案建立步驟，因此原始圖片從不離開你的電腦，整個流程既私密又快速。圖示產生並下載完成後，剩下的工作就是將 PNG 檔案上傳到伺服器，並把對應的 HTML 片段貼到頁面模板的 head 中。
Chrome 在你的網站上尋找什麼
Chrome 透過讀取你載入頁面的文件 head 來顯示 favicon。當網站包含帶有明確尺寸與類型的 link 元素時，Chrome 會為其正在繪製的介面挑選最接近的版本 — 分頁列中使用極小的版本，書籤列中用較大的版本，而釘選分頁或新分頁頁面則使用最高品質的正方形。若沒有 link 元素，Chrome 會改向文件根目錄請求 /favicon.ico，這就是為什麼這個舊式單一檔案至今仍如此普遍，雖然現代網站通常會提供更豐富的組合。
HTML 標準透過 link 元素定義圖示關係。根據 MDN rel icon 參考資料，每個 link 標籤包含四個對 Chrome 重要的欄位：rel、type、sizes 和 href。rel 欄位標示關係名稱，type 宣告檔案的 MIME 類型，sizes 以寬 x 高的格式描述呈現尺寸，href 則指向實際檔案。Chrome 會接受同一頁面上的多個圖示，並依據製的介面在它們之間選擇，但並不保證特定的選擇結果 — 最終的挑選屬於瀏覽器行為。
由於 Chrome 透過一般的 HTTP 請求取得這些圖示，任何干擾靜態資源提供的因素也會導致 favicon 失效：PNG 檔案回應 404、href 中的目錄錯誤、HTTPS 混合內容封鎖，或是會保留舊檔案的積極快取代理伺服器。這些情況的解決方式都相同 — 確認 link 指向的路徑上確實存在該檔案，並在重新載入前清除本機快取。
挑選能禁得起 16 像素裁切的圖片
Chrome 會請求的最小圖示為 16 像素見方，大約是分頁列中郵票的大小。在這個尺寸下，瀏覽器只有 256 像素的空間容納整個主體，因此原始圖片必須具備高對比、簡潔且置中。纖細的筆觸、細小的字母與細微的漸層都會消失；單一醒目的標誌或縮寫字母通常較易辨識。
Favicon Generator 在縮放前使用置中的封面裁切，這代表它永遠會從來源中央取出最大的正方形區域。橫向來源會左右邊緣等量裁切；直向來源會上下邊緣等量裁切；正方形來源則完全不裁切。這種方式可預測且對標誌、字母組合和符號效果良好，因為其重要細節本就靠近中央，但它並非互動式裁切編輯器。如果你的主體刻意偏離中心 — 例如標誌在某個角落藏有副標 — 請先使用 Image Cropper 預先裁切，再上傳到產生器。來源圖片會在你的 Chrome 分頁內於本機解碼與縮放，因此原始檔案永遠不會被送到處理伺服器。
避免使用小於 256 像素見方的來源。64 像素的來源放大到 512 像素會顯得模糊，因為產生器只有 64 像素的細節可供運用。JPEG 來源沒有透明頻道，因此在白頁上看起來正常的淡色邊緣，在深色瀏覽器主題中可能顯得髒污；發布前請同時在淺色與深色背景上檢查結果。具透明度的 PNG 或 WebP 來源會保留其 alpha 頻道，在兩種主題上都能乾淨地呈現。
在 Chrome 中產生正方形 PNG 檔案
以下是將一張本機圖片轉換為 Chrome 所需正方形 PNG 檔案集的實用工作流程。
- 在 Chrome 分頁中開啟 Favicon Generator，選擇一張主要主體靠近中央的 PNG、JPEG 或 WebP 來源圖片。檔案大小上限為 25 MB 壓縮大小，瀏覽器解碼後為 4000 萬像素。
- 從可用清單中挑選你需要的正方形像素尺寸 — 16、32、48、64、128、256 和 512 px。勾選你打算託管的每個尺寸；每個尺寸都會從解碼後的來源以原始尺寸獨立繪製，因此 512 px 檔案並非 32 px 預的放大版。
- 等待預覽產生完畢。工具會為每個選定的尺寸顯示一張縮圖，讓你在下載前能確認中央裁切擷取了正確的區域。
- 點擊每個 PNG 檔案的連結以下載。下載的檔名遵循 favicon-32x32.png 的格式，檔案內容是符合所標示尺寸的 image/png Blob。
- 複製預覽下方所列印的對應 HTML link 程式碼。每行都是完整的 link 元素，包含 rel="icon"、type="image/png"、WxH 格式的 sizes 屬性，以及相對於根目錄的檔名。
- 將 PNG 檔案上傳到每個 link 所指定的目錄，或編輯每個 href 以符合伺服器上實際的資源路徑。
整個程序都在使用中的 Chrome 分頁內執行。不會有任何檔案離開你的電腦，且預覽與下載所用的物件 URL 會在結果被取代或頁面關閉時撤銷。
HTML Link 片段包含什麼
產生器會為每個選定的尺寸輸出一行 link 元素，格式符合 HTML 標準中定義的圖示關係。三個尺寸的典型區塊在精神上看起來如下，雖然產生器會將每行分開撰寫：
| 欄位 | 範例值 | 用途 |
|---|---|---|
| rel | icon | 告訴 Chrome 此 link 指向 favicon 資源。 |
| type | image/png | 宣告 href 所指向檔案的 MIME 類型。 |
| sizes | 32x32 | 回報原始像素尺寸，讓瀏器能挑選最合適的版本。 |
| href | /favicon-32x32.png | 瀏器請求的路徑；必須可從線上網站存取。 |
你只需要保留你實際發布的尺寸所對應的程式碼。如果略過 48 px 檔案，請移除其對應的一行。多個圖示 link 讓 Chrome 能為每個介面選擇合適的資源 — 分頁列、書籤項目、釘選捷徑 — 但最終選擇仍是瀏覽器的決定。產生器僅負責準備標記；它不會修改你的網站，也不會確認實際環境的快取行為。關於尺寸與 HTML 程式碼對應關係的更詳細說明，請參閱指南 如何從 PNG 產生 Favicon：尺寸與 HTML 連結。
挑選真正會被使用的尺寸
Chrome 會在多個位置顯示 favicon，並非每個尺寸都值得耗用額外的位元組。下表列出常見的 Chrome 介面，以及在每個介面上能清晰顯示的最小像素尺寸。
| Chrome 介面 | 一般呈現尺寸 | 合理的匯出尺寸 |
|---|---|---|
| 分頁列 | 16 x 16 | 16 px |
| 書籤列 | 16 x 16 | 16 px 與 32 px |
| 歷史紀錄頁面列 | 16 x 16 或 32 x 32 | 32 px |
| 懸停預覽與釘選分頁 | 32 x 32 至 64 x 64 | 64 px |
| 新分頁頁面方塊 (Android) | 最高 192 x 192 | 256 px |
| 分享面板與閱讀清單 | 最高 512 x 512 | 512 px |
對於以桌面為主的網站，務實的組合是 16、32 和 64 px。如果你希望在高密度螢幕與行動裝置介面上有清晰的標誌，請再加上 256 px 與 512 px。不會產生大於 512 px 的檔案，因為 Chrome 並不會使用它們，多餘的位元組只會被浪費。
以實際大小檢查最小的檔案
發布前，請在任何影像檢視器中以 100% 縮放開啟 16 px 與 32 px 的下載檔案。瀏覽器在縮放過程中會平滑像素，使纖細筆觸與細小字母變得模糊，因此在 256 px 預覽中看起來沒問題的標誌，到了 16 px 版本可能會變得無法辨識。如果主體在最小尺寸下消失，請從更高對比的來源重新產生，或將主體移至原始影像的視覺中心附近。
一個可靠的測試方法是將兩個檔案拖放到網頁模擬稿上、置於虛構的分頁標題旁，然後瞇著眼觀察。任何能通過這個瞇眼測試的標誌，都足以應付 Chrome 的分頁列。如果 16 px 版本未通過測試，請將其從發布組合中移除，讓 Chrome 在分頁列中改用 32 px 圖示作為替代 — Chrome 在某些介面中仍會依檔名請求 16 px 檔案，但缺少檔案只會讓它回退到下一個較大的尺寸，而不會破壞版面配置。
同時在白色背景與深色背景上檢查圖示。Chrome 的分頁列會跟隨系統主題，因此在白色介面上看起來正確的圖示，在深色介面上可能會顯得過於黯淡。具透明度的 PNG 或 WebP 來源會透過產生器保留其 alpha 頻道，在兩種主題上都能乾淨呈現；JPEG 來源沒有透明度，可能需要先使用 Add Background to PNG 工具手動替換背景。
如果舊的網站圖示一直沒有消失
部署新的網站圖示後，一個常見的意外狀況是 Chrome 持續顯示先前的版本。幾乎每個案例都源自於以下三個原因。
首先，href 中的檔案路徑與 PNG 在伺服器上的實際位置不符。請開啟已部署的網頁原始碼，確認每個 href 都能正確解析——Chrome 的 DevTools Network 面板會顯示該請求及其狀態碼。其次，瀏覽器正在提供舊版圖示的快取副本。請開啟 chrome://settings/clearBrowserData，選擇「快取的圖片和檔案」，針對相關網站清除後重新載入。第三，新檔案雖然已上傳，但網頁本身並未以防止快取的查詢字串重新載入，導致瀏覽器重複使用了仍參照舊檔案的舊版 HTML 文件。
除了上述三點之外，此產生器並不會產生 ICO 容器、SVG 圖示、Apple 觸控圖示、Android 自適應圖示組合、固定分頁資產或網頁應用程式清單。這些格式不在其範圍內，對它們的請求將會從產生器所輸出的標記中收到 404。針對 Apple 觸控圖示，請手動或透過任何影像縮放工具另外產生一張 180 px 正方形的 PNG，並從您自己的 head 標記中加以引用。
若想深入了解，請參閱如何將 Word 中的影像另存成本機檔案。