若要從圖片建立網站圖示(favicon，請在瀏覽器中解碼本機的 PNG、JPEG 或 WebP 檔案，以中央裁切的方式裁成正方形，將該正方形在 Canvas 上以每個要求的像素尺寸各別繪製一次，並將每個結果匯出成 image/png 檔案，同時附上一段對應的 rel="icon" HTML 程式碼片段。整個流程都在目前的瀏覽器分頁中執行，使用 WHATWG 定義的 rel="icon" 關係，因此不涉及上傳步驟，原始圖片也保留在裝置上。從一般圖片建立網站圖示的挑戰在於，網站圖示非常小:瀏覽器分頁圖示為 16 像素，工作列捷徑可能是 32 或 48，即使是高效密度的書籤介面，也鮮少要求超過 128 像素。內容繁雜的標誌或寬幅橫向照片，在縮成這麼小之後，幾乎無法保留主體而不失焦。一套可預期的裁切規則、一小組固定的精確尺寸，以及對應的標記程式碼，就是將日常圖片轉為可部署網站圖示組合的三個要素。
原始圖片需要符合的條件
你一開始使用的原始圖片，幾乎決定了所有輸出結果。這個工具接受靜態的 PNG、JPEG 或 WebP 檔案，會拒絕 SVG、動畫輸入，以及該集合以外的任何光柵格式，以便瀏覽器能安全地解碼像素。解碼後的影像也必須落在工具的安全限制之內:檔案大小在 25 MB 以內可通過尺寸檢查，而解碼後超過 4000 萬像素的影像，會在任何輸出 canvas 配置之前就被擋下。一張 4000 萬像素的照片，例如 8000 乘 5000，正好位於該上限;超過這個尺寸的影像將無法處理，因為磁碟上的壓縮位元組，並無法描述瀏覽器實際解碼圖片時所使用的記憶體。
構圖與格式同樣重要。由於工具會從原始圖片中擷取最大的可能中央正方形，主體本來就必須接近中央。偏離中央的標誌、寬幅橫幅，以及邊緣內容吃重的照片，在縮放開始之前，重要內容就會被切掉。遇到這種情況，正確的做法是先使用影像裁切工具裁切原始圖片，再把正方形版本送回工具。如果你的影像已經有想要保留的透明區域，請使用 PNG 或 WebP 來源;JPEG 來源天生沒有透明像素，因此輸出結果會落在解碼器所產生的任何不透明背景上。
中央裁切規則如何影響你的結果
中央覆蓋裁切是決定圖片哪個部分能保留到每個輸出的規則。對於橫向影像，它會從左右兩側裁去等寬的條狀區域，直到影像變成正方形。對於直向影像，它會從上下兩側裁去等高的條狀區域。正方形來源則完全不裁切，這個可預期的規則，正是讓這個工具能安全地用於標誌、字母組合與中央插圖的原因。
請看一個實際的範例。假設來源是 1000 乘 600 像素的寬幅橫條式標誌。中央覆蓋的計算會從這個 1000 像素寬的來源中，擷取一個以中央對齊的 600 乘 600 像素正方形區域。裁切範圍從第 200 欄開始，到第 800 欄結束，從左邊裁掉 200 像素，從右邊裁掉 200 像素。原始長寬比為 5:3;裁切後的區域正好是正方形，這也是所有網站圖示輸出唯一接受的形狀。如果來源是 600 乘 1000 像素，正方形區域同樣是 600 乘 600，取自第 200 列到第 800 列。同樣的規則適用於每個選定的輸出尺寸，因為每個要求的網站圖示都會以解碼後的來源，在各自原始的解析度下獨立重新繪製。預覽縮圖雖然方便，但絕不會被較大的下載檔案重複使用;每一張都是全新的 Canvas 繪製結果。
如何從圖片建立網站圖示
請使用 Favicon Generator，透過幾個具體的小步驟，從圖片檔案建立網站圖示。整個流程都在同一個瀏覽器分頁內完成，不會將來源影像傳送到任何地方。
- 挑選一張主要主體靠近中央的 PNG、JPEG 或 WebP 來源。簡單、高對比的正方形標誌或置中的字母組合，效果最佳。請避免邊緣吃重的照片和寬幅橫幅，因為中央裁切會在縮放之前就把邊緣切掉。
- 從 16、32、48、64、128、256 與 512 像素中，挑選你需要的正方形 PNG 尺寸。你不需要全部勾選;一般瀏覽器分頁通常需要 16 與 32，而高效密度介面與書籤列則由 48 與 64 提供良好的顯示效果。
- 產生圖示、檢查預覽，然後下載每個要求的檔案。每個下載連結的檔名中都會帶有精確的像素尺寸，例如 favicon-32x32.png。請以 100% 縮放打開 16 與 32 像素的檔案，確認主體仍然清楚可辨，再正式採用。
- 複製工具所產生的對應 rel="icon" HTML link 程式碼片段，將每個 href 編輯為符合你實際資產路徑的值，然後貼到頁面的 head 區段。請將每個 PNG 檔案放到對應的根路徑，或將 href 更新為你真正上傳它們的目錄。
如果來源被拒絕，請將其轉換為支援的靜態光柵格式後再試一次。檔案損壞或異常龐大的檔案，也可能在使用工具本身限制之前，就先在瀏覽器的初始解碼步驟中失敗。
選擇與瀏覽器顯示網站圖示方式相符的 PNG 尺寸
不同的介面會要求不同的網站圖示尺寸。這個工具可以產生七種精確尺寸中任何一個子集合，而將每個尺寸對應到它實際出現的位置，則是保持分頁圖示銳利最安全的方式。標準的 rel="icon" 關係與 type="image/png" 宣告會描述每個 link;瀏覽器接著會挑選它能針對特定介面所呈現的最合適資源。透過尺寸對照表，能更容易瀏覽常見的搭配。
| 輸出尺寸 | 常見介面 | 為何有幫助 |
|---|---|---|
| 16 x 16 | 傳統瀏覽器分頁 | 實務上最小的圖示，在接近像素級的尺度下仍必須保持可辨識 |
| 32 x 32 | 高效密度分頁與書籤列 | 許多桌面瀏覽器在 16 像素不可用時的預設 fallback |
| 48 x 48 | Windows 網站捷徑與工作列釘選 | 經常是 Windows 釘選捷徑所要求的解析度 |
| 64 x 64 | 高效密度桌面介面 | 在已縮放顯示器上，比 48 更清晰的替代方案 |
| 128 x 128 | 書籤圖示與應用程式切換器 | 在會將圖示放大的介面上保留更多細節 |
| 256 x 256 | macOS 釘選分頁與密集書籤面板 | 用於作業系統在側邊面板中顯示較大縮圖之處 |
| 512 x 512 | 大型桌面預覽與來源封存檔 | 適合作為較小輸出所衍生的母本 |
瀏覽器本身會負責實際的挑選。列出更多尺寸可讓瀏覽器有更多選項可選，但在任何特定分頁、書籤介面或作業系統上的可見結果，都是瀏覽器控制的行為。
解讀工具產生的 HTML link 程式碼片段
每個產生的檔案都會搭配一段標準的 HTML link 程式碼。該片段使用 WHATWG 定義的 rel="icon" 關係、明確的 type="image/png" 媒體類型、一個正方形的 sizes token 用來標示精確的像素尺寸，以及一個根目錄相對路徑的 href。一段典型的配對看起來像這樣:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
請只複製你實際放在網站上的檔案所對應的程式碼。如果你的檔案存放在 /assets/icons/ 而非根目錄，請將每個 href 編輯為對應的路徑。MDN 的 rel icon 參考資料記載了這個工具所輸出的屬性集，包含 type 與 sizes 語法。多個 icon link 可讓瀏覽器挑選最合適的一個，但這個工具並不保證特定瀏覽器或作業系統會選擇顯示哪一個尺寸。
在發布前驗證結果
最小的輸出檔案是最容易藏問題的地方。請以 100% 縮放打開 16 與 32 像素的下載檔，確認主體仍然清楚可辨，因為瀏覽器在縮放影像時會平滑化細線與微小文字。如果透明度對你的品牌很重要，請同時在淺色與深色背景下檢查結果;淡色邊緣與透明光暈在一種背景上可能會消失，在另一種上則可能會發亮。這個工具會保留 PNG 或 WebP 來源中既有的透明度，但無法從不透明來源中移除透明度。
部署完成後，請在線上頁面上使用「檢視原始碼」，確認圖示檔案確實透過網路載入。如果舊圖示仍然顯示，請清除網站資料或瀏覽器快取，因為快取的網站圖示會存活很久，並可能掩蓋新部署的結果。部署端的完整流程會在另一篇關於在網站上設定網站圖示的指南中介紹，內容包括上傳 PNG、將 link 程式碼貼到文件 head，以及驗證請求路徑。
這個工具本身不會修改你的網站、上傳你的檔案，或確認任何正式的快取行為。它只負責準備資產與標記;其餘發布步驟由你自行處理。