為你的標誌製作 favicon（網站圖示），其實只是一個小小的方形 PNG 圖示，瀏覽器會在分頁、書籤和歷史紀錄中顯示它，而最簡單的做法就是把你本機的標誌轉成你需要的像素尺寸。Favicon 產生器會從你的電腦接收 PNG、JPEG 或 WebP 檔案，在當前的瀏覽器分頁中解碼，從影像中央裁切出盡可能最大的正方形，然後將每個要求的尺寸各自匯出為 image/png Blob，並使用清楚的檔名，例如 favicon-32x32.png。由於每個輸出都是以其精確的原始尺寸獨立繪製，因此 16 像素的下載檔確實是 16×16 像素，而不是放大後的預覽，所以最小的圖示在 100% 縮放檢視時依然保持清晰。這個工具也會寫入符合每個檔案的標準 rel="icon" HTML 連結行，讓標記和檔名保持一致，你可以直接貼進文件的 head 中。整個過程不會讓任何資料離開你的電腦：原始影像絕不會上傳到處理伺服器，這樣在你準備網站最小的視覺素材時，私密的品牌資產都會保留在你的電腦上。
Favicon 產生器實際上對你的標誌做了什麼
Favicon 產生器圍繞著一個單一且明確的工作：把一張本機影像轉成一組方形 PNG 圖示，讓你可以用標準 HTML 掛到網站上。當你選好檔案後，瀏覽器會在安全限制下解碼它（磁碟上最多 25 MB，解碼後最多 4000 萬像素），接著產生器會計算出一個置中的 cover 裁切。這個規則會從影像中央取出最大的正方形：橫向圖片會在左右兩側等量裁掉，直向圖片會在上下兩側等量裁掉，正方形來源則完全不動。每個選定的像素尺寸接著會被繪製到各自獨立的離屏 Canvas 上，以完整的原始尺寸呈現，匯出為 image/png Blob，並命名為 favicon-16x16.png、favicon-32x32.png 等等。每個檔案所搭配的 HTML 程式碼片段使用 rel="icon" 關係、image/png 的 type 屬性、正方形的 sizes 權杖，以及相對根目錄的 href，這符合 MDN rel icon 參考的規範。
從你的標誌產生 Favicon（逐步教學）
- 在當前的瀏覽器分頁中開啟 Favicon 產生器。不需要帳號或上傳步驟。
- 點選檔案輸入欄，選擇你標誌的 PNG、JPEG 或 WebP 版本，確保主要主體已經接近畫面中央。
- 勾選你想要輸出的正方形像素尺寸：16、32、48、64、128、256 或 512。請只勾選你的網站實際需要的尺寸。
- 等待每個預覽渲染完成。預覽只是視覺上的 sanity check，下載檔則是完整原始尺寸的獨立渲染。
- 點選每個選定尺寸的下載連結。每個連結會提供 image/png Blob，檔名為 favicon-SIZExSIZE.png，尺寸與檔名所標示的完全一致。
- 將對應的 HTML icon 程式碼行複製到你網站的 <head> 中。每行會指向你剛下載的檔案，並使用正確的 type 和 sizes 屬性。
- 把 PNG 檔案放到對應的根目錄路徑，或修改每個 href，讓它指向你實際的素材目錄，例如 /assets/ 或 /public/。
- 在影像檢視器中以 100% 縮放開啟最小的檔案（特別是 16 和 32 像素），確認主體仍然清晰可辨。
- 清除網站資料和瀏覽器快取，然後重新載入已部署的頁面，檢查 document head 和網路請求，確認新的圖示確實有被提供。
值得產生的標誌尺寸以及它們出現的位置
這個工具提供七個固定的像素尺寸。大多數網站只需要兩到三個，而哪些尺寸重要，取決於你預期圖示會在哪裡出現。
| 像素尺寸 | 常見的瀏覽器或平台介面 |
|---|---|
| 16×16 | 標準顯示密度下的瀏覽器分頁 favicon |
| 32×32 | 高 DPI 顯示器和書籤列上的瀏覽器分頁 favicon |
| 48×48 | Windows 網站圖示 tile 和高密度書籤介面 |
| 64×64 | 更高密度的書籤面板和釘選分頁 tile |
| 128×128 | 較大的瀏覽器介面和捷徑對話框 |
| 256×256 | macOS 拖曳到桌面的捷徑圖示和詳細資訊面板 |
| 512×512 | 瀏覽器端的最大尺寸覆蓋和清晰度預留空間 |
選擇更多尺寸可以讓瀏覽器有更多選項可挑，但並不會強制特定圖示出現在特定介面上；最終的選擇仍然取決於每個瀏覽器、書籤介面和作業系統。
為什麼中心裁切對標誌檔案很重要
Favicon 能容納的細節非常少，所以來源的構圖比縮放品質更為關鍵。因為產生器一律使用置中的 cover 裁切，所以經驗法則很簡單：如果你標誌的主要主體已經接近影像中央，它就能毫無改變地通過裁切。如果你的標誌是刻意偏移的，裁切就會從中切過。在這種情況下，請先用 影像裁切器處理檔案，讓品牌標誌在產生 favicon 組之前正好位於正中央。中心裁切也意味著：水平橫幅會在左右兩側等量裁掉，垂直高聳的標誌會在上下兩側等量裁掉。在選擇要餵入哪個標誌變體時請把這點納入考量：寬廣的 wordmark 可能撐不過正方形裁切，但方形字母組合、置中的圖示或圓形中的字母通常都能安然過關。
部署你的 Favicon 檔案和 HTML 程式碼片段
這個工具產生的 HTML 程式碼片段刻意保持精簡。每行都遵循標準模式：rel="icon" 關係、type="image/png" 的 MIME 提示、sizes="WxH" 權杖（對應檔案的實際尺寸），以及指向該檔案的 href。WHATWG HTML 標準將 rel="icon" 定義為把文件與圖示資源建立關聯的方式，而 MDN 參考也確認現代瀏覽器需要 type 屬性並偏好明確的 sizes 值。請只複製你實際上傳的檔案所對應的行。如果你從網站根目錄以外的資料夾提供 favicon，請修改每個 href，讓它指向實際路徑，例如 /assets/icons/favicon-32x32.png。接著在正式環境中驗證兩件事：在全新的瀏覽器分頁中開啟頁面並查看 document head，同時觀察網路面板，確認每個 favicon URL 都回傳 image/png 內容類型的 200 回應。
瀏覽器也會在快取和網站資料中保留舊的圖示，所以剛部署的 favicon 有時需要強制重新整理、清除快取，或關閉並重新開啟分頁後才會出現。如果你部署後舊圖示仍然顯示，請清除網站資料並重新載入。
需要事先規劃的限制
Favicon 產生器的範圍刻意保持精簡。它只產生 PNG 瀏覽器 favicon 和對應的 HTML icon 連結；不會產生 ICO 容器、SVG 圖示、Apple touch icon、Android 圖示組、釘選分頁素材、網頁 app manifest，或任何平台專屬的套件。如果你的網站需要 ICO、Apple-touch-icon 連結或 manifest.json，請在這裡產生 PNG 檔，再另外處理這些格式和標籤。
這個工具除了置中的正方形裁切外，也不會編輯你的原始影像。它無法為不透明的 JPEG 加入透明度，也無法把 PNG 的背景去掉。PNG 和 WebP 來源可以將其既有的透明度帶到輸出結果中，但 JPEG 來源一開始就沒有透明像素，所以產生的 favicon 會是不透明的矩形，疊在瀏覽器分頁所使用的背景之上。如果標誌有透明邊緣或淡色邊緣，請把最小的輸出結果對著淺色和深色兩種瀏覽器主題檢查。
最後，只接受靜態點陣圖輸入。SVG、GIF、動畫 PNG 和動畫 WebP 都被刻意排除，因為它們會引入可執行腳本的向量內容或定義不明的影格選擇。如果你的品牌標誌是 SVG，請先將它匯出為 PNG，再把 PNG 餵入產生器。動畫 favicon、ICO 容器和 Apple touch icon 都不在範圍內，必須使用其他工具處理。
延伸閱讀：如何從 PNG 產生 Favicon：尺寸與 HTML 連結。
延伸閱讀：如何從 SVG 檔案產生 Favicon。