為網站取得 favicon 圖示，代表要產生一個或多個 PNG 格式的小型正方形圖示檔，將它們放在網域中已知的路徑，然後在頁面的 head 中加入對應的 HTML link 標記，讓瀏覽器書籤列和歷史紀錄列有東西可以顯示。最常見可用的大小包括：瀏覽器分頁用 16x16、高 DPI 分頁和工作列用 32x32，以及書籤管理員和 PWA 介面用的 48x48 或更大。每個檔案都是真正的 PNG 圖片；對應的 link 標籤告訴瀏覽器在哪裡可以找到每個尺寸，以及該檔案的預期尺寸。由於最終由各個瀏覽器自行決定要使用哪個檔案，實際目標是提供一組乾淨的、尺寸精確的正方形 PNG，並搭配正確的 link 標記，而不是去追逐單一「正確」的檔案。下面的內容會介紹如何從你已有的圖片在本機產生這些檔案，然後把它們接入你的網頁。

how to get favicon image from website
如何從本機檔案取得 favicon 圖示

favicon 圖示實際上是什麼

Favicon 是 favorite icon（最愛圖示）的縮寫，是瀏覽器在分頁標籤列中頁面標題旁、在書籤中、在已儲存捷徑的主畫面上，以及在歷史紀錄列中所顯示的小圖形。圖片本身只是一個普通 PNG 檔，尺寸為幾種常見的像素大小之一。你在 HTML <head> 中的 <link rel="icon" sizes="..." href="..."> 標籤，就是用來告訴瀏覽器每個版本的位置以及它的預期內容。

最小尺寸 16x16 的檔案最重要，因為大多數瀏覽器分頁實際繪製的就是這個大小。32x32 的檔案可涵蓋高 DPI 螢幕和工作列。較大的尺寸如 48、64、128、256 和 512，則適用於書籤、行動裝置主畫面捷徑、作業系統介面，以及任何需要在較遠距離下呈現更銳利畫面的場合。

對大多數小型網站來說，提供 16x16、32x32 和 48x48 三個 PNG 就足以涵蓋一般瀏覽情境。較大的尺寸則能為使用 retina 螢幕、高 DPI 書籤管理員，以及在較大縮放時顯示縮圖的裝置的使用者帶來更好的體驗。

挑選一個在 16 像素下仍清晰可讀的本機來源圖片

在打開任何工具之前，請仔細挑選來源圖片。Favicon 在最小尺寸時只會被渲染成大約 256 個小像素，因此原始構圖的重要性遠大於檔案大小或銳利度。值得遵循的構圖原則：

  • 使用正方形或接近正方形的來源。正方形檔案可以完全跳過中央裁切；矩形檔案則會從較長的邊緣流失內容。
  • 將主要主體保持在中央附近。Favicon 流程會使用置中的 cover 裁切，因此橫向或直向來源中靠近角落的內容會被裁掉。
  • 優先採用高對比。在純色背景上的簡單雙色標記，在 16 像素下的可讀性，會比細節豐富的漸層更好。
  • 避免過小的文字或細線。字級細於圖示寬度約 8% 的字母，在 32 像素以下會糊成一片雜訊。

如果你的主體刻意偏離中心，請先用專用的影像裁切工具先行裁切，否則中央裁切會把你真正在意的那部分切掉。PNG 和 WebP 來源會一路保留透明度到最終的 favicon 檔案；JPEG 來源本來就沒有透明像素，因此主體後方任何淺色或複雜的背景最後都會被烤進輸出結果中。

使用 Favicon Generator 產生正方形 favicon 檔案

Favicon Generator 負責將本機圖片轉換成尺寸精確的 PNG 檔，並為你產生對應的 HTML link 標記。整個流程都在目前的瀏覽器分頁中執行。來源圖片會在本機解碼、繪製到 Canvas，然後匯出為 PNG blob；檔案本身不會上傳到任何處理伺服器。

  1. 打開 Favicon Generator 並點選檔案選擇器，從電腦中選擇一張 PNG、JPEG 或 WebP 圖片。檔案必須是靜態點陣圖，不支援 SVG 和動畫輸入。
  2. 確認預覽畫面顯示的是你希望作為圖示的部分。工具會套用置中的 cover 裁切，從來源中央取出最大的正方形區域。橫向圖片會在左右兩側等量裁掉，直向圖片則會在上下兩側等量裁掉。
  3. 如果主體偏離中心，請先在這裡停下來並先裁切來源。Favicon Generator 並非互動式裁切編輯器，因此事後無法救回偏離中心的主體。
  4. 選擇你需要的正方形尺寸。可輸出的尺寸包括 16、32、48、64、128、256 和 512 像素。一般小型網站會選 16、32 和 48。
  5. 點選產生動作。每個選定的尺寸都會從解碼後的來源，以其精確的原始尺寸獨立繪製；預覽僅供目視確認，並非下載檔案。
  6. 在 100% 縮放下檢查最小的結果。以實際大小開啟 16 和 32 像素的檔案，確認主體仍然清晰可辨、細線沒有被磨平、也沒有重要的細節被裁掉。
  7. 下載每一個圖示。檔案名稱類似 favicon-32x32.png，以 image/png blob 的形式提供，且 link 中標示的尺寸與其原始像素尺寸一致。
  8. 複製每個產生檔案旁顯示的 HTML link 標記。請只複製你實際打算發布的尺寸對應的標記。

你選定的每個尺寸都會產生一個使用標準 rel="icon" 關係的 HTML 片段，內容大致如下：

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

其中有三個重點。關係代字 rel="icon" 告訴瀏覽器這個檔案是圖示，type="image/png" 屬性指定 PNG 媒體類型，sizes 屬性則標示該檔案的正方形尺寸。瀏覽器會根據 sizes 的值，為其正在繪製的介面挑選一個合適的版本。href 中的檔名會與實際下載的檔案對應，使標記與資產保持一致。

關於 rel icon 關係的正式定義，MDN 的 rel icon 參考資料 涵蓋了語法、媒體類型規則，以及瀏覽器在多個尺寸之間挑選的預期方式。請只貼上你實際上傳的尺寸對應的標記。指向不存在檔案的多餘 link 標記並不會加速任何事情，只會在伺服器記錄中產生一堆 404。

將檔案和標記片段放到你的網站上

將選定的 PNG 檔放到你的專案中。產生的標記片段使用的是根目錄相對路徑，因此最簡單的安排就是把每個檔案放在其 href 中所指明的路徑，例如 /favicon-32x32.png 放在網站根目錄。如果你的資產放在不同的目錄下（例如 /assets/icons/），請在部署前編輯每個 href 以符合實際位置。

把選擇好的 link 標記貼到每個需要顯示圖示的頁面的 <head> 中，通常是放在共用的版型或模板裡。先後順序不重要，但將它們集中在 head 頂部，未來會比較容易找到。如需更完整的部署步驟說明，包括 CDN 路徑和共用片段，請參考 在網站上設定 favicon 指南，其中有更深入的步驟說明。

部署完成後，開啟該頁面、檢視原始碼，確認 link 標記確實存在。在網路面板中，確認每個檔案都回應 200，並確認回傳的位元組與預期的 PNG 相符。如果實際頁面仍然顯示錯誤的圖示，下一節會說明常見的原因。

為何舊圖示仍然顯示

即使在乾淨的部署之後，舊圖示常常仍然出現，這是因為瀏覽器、作業系統和中間的 CDN 都會積極地快取 favicon。下面的簡短檢查清單可以涵蓋大多數情況：

  • 使用 Ctrl/Cmd+Shift+R 強制重新載入頁面，以略過瀏覽器的影像快取。
  • 在瀏覽器設定中清除你網域的網站資料。
  • 如果你位於 CDN 或反向代理伺服器之後，請在邊緣節點清除快取的 HTML 和快取的圖示檔。
  • 確認你沒有從伺服器預設值提供舊的 /favicon.ico，它可能會覆蓋掉新的 PNG 組合。
  • 確認 href 屬性中的檔案路徑，確實符合檔案實際所在的位置。

請注意，瀏覽器、書籤管理員或作業系統介面最終會顯示哪一個圖示，最終仍由瀏覽器決定。多個 rel icon link 為瀏覽器提供了選項；它們並不保證某個介面一定會選用某個尺寸。

這種方法不適用的情況

Favicon Generator 只產生 PNG 格式的瀏覽器 favicon 和對應的 rel icon HTML 片段。它刻意不涵蓋 favicon 生態系的其他部分。如果你的專案需要下表中的任何項目，請把這個工具產生的 PNG 組視為瀏覽器 favicon 的基準，然後再加上各平台專屬的資產。

需求此處涵蓋？替代做法
/favicon.ico 預設的舊版 .ico 容器否使用專用的 ICO 工具將 PNG 組轉換成多尺寸的 .ico
iOS 主畫面釘選用的 Apple touch icon否新增一個 180x180 的 apple-touch-icon.png 並搭配自己的 link 標籤
Android、PWA 或可安裝的網頁應用程式圖示否建立一份網頁應用程式 manifest，並包含目標作業系統所要求的尺寸
SVG 圖示否直接撰寫 SVG；此流程會拒絕 SVG 以避免可執行的內容
Safari 的釘選分頁資產否提供適用於釘選分頁介面的單色 SVG

值得了解的來源圖片限制

輸入僅限於 PNG、JPEG 和 WebP 檔案，且大小上限為 25 MB。在瀏覽器解碼來源之後，超過 4000 萬像素的圖片會在配置輸出 canvas 之前被拒絕。SVG 檔和動畫圖片被刻意排除，因此如果你的來源屬於不支援的格式，請先將其轉換為靜態點陣圖。壓縮後的檔案大小本身並不能反映解碼時的記憶體用量，這也是為什麼除了檔案大小上限之外，還設有解碼後的像素上限。

若要建立可靠的發布流程，請從一個簡單、高對比度的正方形標誌開始，產生你所需要的尺寸，並以 100% 縮放開啟最小的檔案。確認主體仍然清晰可辨、沒有任何重要細節被中央裁切裁掉，且透明邊緣在淺色和深色瀏覽器主題下都呈現正確。上傳選擇好的 PNG 檔，把對應的 link 標記貼到文件的 head，並驗證部署後頁面的原始碼與網路路徑。本產生器只負責準備資產和標記；它不會修改你的網站、不會上傳檔案，也不會確認正式環境的快取行為，這也是為什麼上述驗證清單很重要。

如果你正在權衡各種選項，Image Color Picker 替代方案：免費、私密、本機 有詳細說明。