從 PNG 產生 favicon，代表要把一張本地端的圖片轉成一組正方形的 PNG 檔案，而且尺寸要完全符合瀏覽器預期的像素大小——通常是 16、32、48、64、128、256 與 512 像素——然後為每一個檔案搭配一個相符的 rel="icon" HTML link 元素。Favicon Generator 正好就是在你目前的瀏覽器分頁中完成這件事：它在本機解碼來源圖片、以各個輸出的原始尺寸繪製，再匯出成一個 image/png 的 Blob，檔名類似 favicon-32x32.png。因為整個流程都在用戶端完成，原本的 PNG 從不離開你的電腦，這在來源是私人 logo 或尚未發表的產品標誌時尤其重要。PNG 也天生適合這個任務：它保留 alpha 通道，所以來源中既有的透明度會一路帶到最小的 16 像素圖示，避免在有顏色的瀏覽器分頁上被填成一塊實心白底。
Favicon Generator 接受什麼、產出什麼
這個工具會直接從你的裝置讀取 PNG、JPEG 與 WebP 檔案。來源檔案在解碼前以 25 MB 為上限；若解碼後暴露出超過 4000 萬像素則會被拒絕，這道安全限制是為了避免瀏覽器在處理異常巨大或格式錯誤的圖片時耗盡記憶體。SVG 與動畫輸入會刻意排除，因為向量內容可能夾帶腳本，而連續動畫格沒有一個明確的「主要」畫面可以挑選。如果來源被拒，最實際的應變方式就是先轉成支援的靜態點陣格式再重試。
在成功解碼一份有效的來源後，產生器會在原始尺寸中取能放下的最大置中正方形，並把這個正方形套用於所有輸出。正方形來源完全不會被裁切。橫向來源會從左右兩側各裁掉等量。直向來源會從上下兩側各裁掉等量。這條規則固定且可預期，正好適用於置中的 logo、字母組合與圓形徽章，但對偏在畫面角落的主題來說表現就不好。
對於你選定的每一個尺寸，產生器會各自配置一個離屏 canvas、以高品質繪製裁切後的來源、再匯出成全新的 image/png Blob。螢幕上的預覽只是輔助；你實際下載到的檔案大小，就是該下載連結所標示的像素尺寸，並不是預覽的放大版。這個工具也會輸出一組對應檔名的 HTML link 元素，讓你貼到頁面 head 的標記與上傳的檔案不會彼此脫節。
產出內容的範圍很窄，值得先說清楚。
| 資產或標記 | 本工具是否包含 |
|---|---|
| 尺寸 16、32、48、64、128、256、與 512 像素的正方形 PNG favicon 檔案 | 是 |
| 尺寸與檔名相符的標準 rel="icon" HTML link 行 | 是 |
| ICO 容器檔 | 否 |
| SVG favicon | 否 |
| Apple touch icon | 否 |
| Android Chrome 網頁應用程式 manifest | 否 |
| 釘選分頁用 SVG（單色） | 否 |
| 為不透明來源自動去背或加透明度 | 否 |
準備 PNG 來源以產出乾淨的 Favicon
favicon 能容納的細節非常少，所以來源的構圖比解析度更重要。挑一張主體落在中央區域內的圖片，中央裁切才能保留下來。畫在一個假想中央正方形裡的 logo——字母縮寫、字母組合、徽章標記、簡化的字標——在縮放後會比繁雜的照片或角落帶有文字的場景存活得好得多。
如果主體刻意偏離中央，請先預先裁切 PNG，讓重點落在中央正方形內，再送給產生器。像 Image Cropper 這類工具採用相同的本機瀏覽器流程，可以靠肉眼調整裁切框的位置。先跑裁切步驟，favicon 的結果才會可預期而不令人意外。
高對比也有幫助。在 16 像素下，細線條會塌掉、淡色疊淡色的字會糊成一片。盡量採用粗壯的輪廓、雙色標記，或一眼就能讀懂的外形。如果 PNG 已經帶有透明度，請保留：alpha 通道在縮放過程中會被保留，而一張透明的 favicon 不管在淺色或深色瀏覽器主題上都能乾淨適應。如果來源帶有白色或淡色背景，請務必在深色瀏覽器分頁上檢查結果，確認圖示不會視覺上消失。
如何從 PNG 產生 Favicon
- 在瀏覽器中開啟 Favicon Generator。無須註冊、無須上傳、無須經過任何伺服器。
- 點擊檔案輸入欄，從電腦中選擇一張 PNG。JPEG 與 WebP 也能使用，但若希望結果保留透明度，建議採用 PNG 作為來源。
- 目視確認載入的來源。若主體落在中央區域內，就直接使用。若主體偏向邊緣，請先裁切 PNG 再重新載入。
- 勾選你實際想要的正方形尺寸：16、32、48、64、128、256 與 512 像素都可用。多數網站只需要 16 與 32，但較大的尺寸在高 DPI 螢幕與作業系統層級釘選介面上會更實用。
- 產生 favicons。此工具會依各個選定尺寸，從解碼後的來源以原始尺寸獨立繪製，不是把單一小預覽向上放大。
- 以 100% 縮放開啟每張下載的 PNG，特別是 16 與 32 像素的檔案。確認主體清晰可辨，且沒有任何重點被中央裁切切掉。
- 從工具中複製對應的 HTML link 片段。僅貼上你實際會發佈的檔案對應的行。
- 將選定的 PNG 檔案上傳到你的網站，然後編輯每個 href，讓它指向檔案在伺服器上的實際位置。
解讀產生的 HTML 片段
產生器輸出的每個片段都遵循相同的格式，而理解其中四個屬性，其餘發佈步驟就會很直觀。
rel="icon" 關係是瀏覽器用來發現 favicon 的標準勾點，定義於 WHATWG HTML Standard 的 link type "icon"。type="image/png" 屬性對應到產生器實際匯出的檔案 MIME 類型，也就是每個輸出都是 image/png。sizes="32x32" 屬性告訴瀏覽器它正在查看的資源的精確像素尺寸，讓瀏覽器能為正在繪製的介面挑選最接近的版本。href 預設為像 favicon-32x32.png 這種根目錄相對路徑，你可以自由編輯以符合檔案在網站上的實際位置。
多個 link 元素是正常且實用的做法。列出 16、32 與 48 像素的檔案，可讓瀏覽器依其繪製介面挑選最合適的尺寸，但最終的顯示決定仍由瀏覽器掌握。若想進一步了解該屬性，可參考 MDN 關於 rel="icon" 的參考文件，其中記載了相同的格式並列出瀏覽器接受的值。
PNG 來源帶給你、其他格式給不了的優勢
PNG 是這項任務最寬容的輸入格式，原因只有一個：它能攜帶 alpha 通道。以透明 PNG 匯出的 logo，會把那份透明度一路保留到 16 像素的檔案，因此 favicon 不需要在背後加上一塊顏色方塊，就能在淺色或深色瀏覽器分頁上看起來正確。JPEG 來源一開始就完全沒有透明像素——JPEG 根本無法編碼 alpha 通道——所以產生的 favicon 是完全不透明的矩形。WebP 在編碼包含 alpha 通道時也能透明，產生器會以與 PNG 相同的方式保留那份透明度。如果原圖帶有透明邊緣或淡色邊緣，請同時在淺色與深色背景下檢視結果。
產生器無法為來源補上原本沒有的透明度。如果你的 logo 帶有實心白底，而你想要透明的 favicon，請在執行產生器之前，先在編輯器中把背景移除。至於在一般影像任務中何時該選 PNG、JPEG 或 WebP，可參考 JPEG vs PNG vs WebP 指南，其中逐一比較各格式的權衡。
你可以在七種可用輸出尺寸中任意組合。常用的搭配是 16 與 32 作為最小配置；如果你也想要銳利的 Windows 網站圖示，則可選 16、32 與 48。
| 輸出尺寸 | 常見用途 |
|---|---|
| 16 x 16 | 最小的瀏覽器分圖示與低 DPI 書籤介面 |
| 32 x 32 | 標準瀏覽器分頁圖示與大多數工作列捷徑 |
| 48 x 48 | Windows 網站圖示與較大的書籤介面 |
| 64 x 64 | 更高密度的分頁圖示與釘選介面 |
| 128 x 128 | macOS 風格的 dock 圖示與頁面內 iconography |
| 256 x 256 | 現代高 DPI 顯示器與大型作業系統介面 |
| 512 x 512 | 可用最大輸出，適用於極高 DPI 介面 |
PNG 轉 Favicon 常見問題與如何察覺
最常見的抱怨是 16 像素圖示模糊。原因幾乎都在來源：細線條與細小文字無論縮放演算法多優秀，都撐不過縮到 16 像素，因為瀏覽器在縮放時會對像素進行平滑處理，而非常小的圖示無法保留細節。請以 100% 縮放開啟下載檔案，直接看真正的像素，而不是螢幕算繪的預覽。若主體糊掉，請用更粗的筆觸重畫來源或挑選更簡潔的標記，然後重新產生。
第二常見的抱怨是「favicon 沒有更新」。瀏覽器會積極快取 favicon，往往不是強制重新整理頁面就能解決。請清除瀏覽器快取，或在無痕式視窗中開啟已部署的頁面，確認新檔案確實有被提供。較早選擇所留下的過時非同步算繪任務也無法在工具內部被新的取代——這在反覆嘗試來源時特別有用。
第三種抱怨是「我的主體被切掉了」。這正是中央裁切機制運作的方式。寬幅來源若 logo 落在左側三分之一，就會失去左側三分之一的 logo。請先裁切 PNG，讓主體落在中央正方形內，再執行產生器，因為 favicon 工具並不是互動式裁切編輯器。
第四種抱怨是「我的透明 PNG 跑出一塊顏色方塊」。這通常代表算繪出來的 favicon 被顯示在瀏覽器主題上，而原本 PNG 的透明區域實際上就是貼著同一個顏色，所以你看到的方塊其實是瀏覽器介面本身，而非產生器造成的瑕疵。
發布檢查清單
- 在上傳任何檔案之前，請先以 100% 縮放比例檢查 16 和 32 像素的下載檔案。
- 如果原始 PNG 為透明背景，請在淺色和深色的瀏覽器分頁上都檢查一下結果。
- 只上傳您真正想要發布的 PNG 檔案。
- 編輯已複製程式碼片段中的每個 href，使其符合檔案在您伺服器上的實際路徑。
- 將編輯後的程式碼片段貼到每個應該顯示 favicon 的頁面範本的 head 中。
- 清除瀏覽器快取或開啟無痕視窗，以驗證部署的檔案確實正在被提供。
若想深入了解，請參閱 為 PNG 加上背景說明：透明度如何被取代。