favicon 是一個小型的方形圖示，通常是 16x16、32x32 或 48x48 像素，瀏覽器會在分頁、書籤和網址列中顯示它，以便一眼就能識別網站。從一張圖片產生 favicon，意即從一張本機圖片（標誌、字母標誌，或簡化的品牌圖形）出發，並將其匯出為一組方形 PNG 檔案，尺寸符合瀏覽器或手機主畫面對於圖示的各種需求。標準工作流程包含挑選一張置中的來源圖片、選擇你實際需要的方形尺寸、下載每張 PNG，然後將對應的 HTML link 程式碼片段複製到網站的 head 中，讓瀏覽器和裝置知道去哪裡找到每個檔案。
大多數網站仍然只提供單一的 favicon.ico 檔案，但現代瀏覽器和裝置會同時要求多種尺寸。16x16 圖示適用於瀏覽器分頁，32x32 適用於高 DPI 分頁和書籤列，180x180 用於 iOS 的 apple-touch-icon，192x192 加上 512x512 則供 Android 主畫面和漸進式網頁應用程式 manifest 使用。從同一張來源圖片產生各種尺寸，能讓你的品牌在各種呈現上保持一致。這正是 Favicon Generator 設計來處理的工作：餵給它一張本機圖片，它就會產生可選擇的方形 PNG favicon 以及對應的 HTML icon 連結。
為什麼專屬的 Favicon Generator 勝過手動調整大小
你可以用完整的影像編輯器手動調整圖片大小並逐一存檔，但容易忽略的部分是 HTML。每個 favicon 尺寸都需要在文件的 head 中放上自己的 link 標籤，包含正確的 rel 屬性以及與檔案相符的 type。32x32 PNG 的 link 和 180x180 apple-touch-icon 的 link 並不相同，而錯誤的 rel 屬性可能會讓圖示在 Safari 或 Android 主畫面上看不見。專為此目的打造的 favicon 工具會把每張 PNG 與已經為你寫好的 link 程式碼片段配對在一起，藉此消除最常見的 favicon 故障原因。
另一個優點是隱私和速度。許多線上 favicon 網站會在處理前把你的圖片上傳到遠端伺服器，這對尚未公開的標誌或私人模擬圖來說可能令人擔憂。基於瀏覽器的工具則會把檔案保留在本機，因此整個產生過程都在你的裝置上完成，不會經過網路傳送。你也可以省下等待上傳的時間，當你正在反覆調整標誌、每次修改後都需要重新產生時，這一點特別重要。
| Favicon 尺寸 | 常見用途 | 對應的 HTML rel 屬性 |
|---|---|---|
| 16x16 | 傳統瀏覽器分頁 | icon |
| 32x32 | 高 DPI 分頁、書籤列 | icon |
| 48x48 | Windows 網站圖示、固定分頁 | icon |
| 180x180 | iOS apple-touch-icon | apple-touch-icon |
| 192x192 | Android 主畫面、PWA | icon (used in manifest) |
| 512x512 | PWA 啟動畫面、高解析度 Android | icon (used in manifest) |
在開始前挑選合適的來源圖片
favicon 很小，所以來源圖片必須以此為前提來設計。挑選一張 PNG、JPEG 或 WebP 檔案，其中主要主體靠近畫面中央，周圍留有足夠的留白，因為在圖片被裁成正方形時，邊角會被裁切或填補。透明背景上的方形標誌是最理想的輸入，但置中的產品照片或純色背景上的粗體字母標誌也很好用。避免過於複雜的構圖或在 16x16 時會變得難以辨識的文字，因為瀏覽器會把圖示縮到該尺寸用於分頁。
解析度與構圖同樣重要。256x256 的來源圖片可以縮成 16x16、32x32 與 48x48 而不會出現明顯模糊，同時也能供行動裝置使用的較大尺寸 180x180 與 192x192。如果你的起始圖片任一邊小於 128px，請先用另一個步驟將其放大，否則結果會顯得模糊。Image Resizer 可以幫助你在產生 favicon 套件之前，將低解析度的標誌放大成乾淨的正方形。
逐步產生 Favicon 檔案
- 在瀏覽器中開啟 Favicon Generator。不需要帳號或登入，工具在本機執行，因此圖片不會被上傳。
- 點擊上傳區域，從你的裝置中挑選一張 PNG、JPEG 或 WebP 檔案。請確認主要主體位於中央，周圍留有空間，這樣在較小尺寸下重要的部分才不會被裁掉。
- 選擇你想要產生的方形 PNG 尺寸。常見的入門組合是 16x16、32x32、48x48 與 180x180，一次涵蓋瀏覽器分頁、高 DPI 分頁、Windows 釘選以及 iOS 主畫面。
- 點擊產生。工具會將每個選定的尺寸分別建立為方形 PNG，並顯示預覽，讓你確認在最小尺寸下的取景看起來正確。
- 在工具允許的情況下，透過 hover 或縮放檢視每張預覽。特別留意 16x16 版本，因為這是對你的來源設計最嚴格的考驗。
- 將每張 PNG 下載到你的專案中，通常放到網站根目錄下的 images 或 icons 資料夾，讓檔案路徑保持簡單。
- 複製工具為每個產生的尺寸所提供的對應 HTML link 程式碼片段。每段程式碼都已包含正確的 rel 屬性以及 sizes 或 type 宣告。
- 將這些程式碼片段貼到每個應該顯示 favicon 的頁面的 head 區段中。大多數靜態網站只需要在 index 樣板中放一次，但單頁應用程式或行銷網站可以將它們貼到共用的 partial 中。
- 在你的網站上強制重新整理（Ctrl+Shift+R 或 Cmd+Shift+R）以略過快取的 favicon，然後檢查瀏覽器分頁，確認新圖示已出現。
每個 Favicon 尺寸出現在哪裡
了解每個圖示會出現在哪裡，有助於你判斷哪些尺寸值得產生。16x16 是仍會出現在精簡分頁列和舊版瀏覽器主題中的傳統尺寸，而 32x32 已默默成為高 DPI 分頁和書籤列的預設值。48x48 是 Windows 用於固定網站圖磚和工作列捷徑的尺寸，同時也能乾淨地作為任何要求稍大圖示的瀏覽器的備援尺寸。
行動平台各有自己的慣例。Apple 裝置會尋找 180x180 的 apple-touch-icon，用以呈現將網站加到主畫面時所用的光滑圖示。Android 主畫面與漸進式網頁應用程式會從 web app manifest 中抓取 192x192 和 512x512 尺寸，但在你的 icons 資料夾中備妥這些 PNG，會讓撰寫 manifest 檔案更容易。從單一來源圖片產生所有這些尺寸，無論由哪種介面呈現，都能讓品牌保持一致。如果你想更深入了解涵蓋 Safari 釘選分頁與深色模式 favicon 等邊角案例的流程，相關指南 How to Generate a Favicon from Any Image 是值得延伸閱讀的後續讀物。
從圖片產生 Favicon 時常見的陷阱
最常見的錯誤是使用非正方形的來源圖片，並假設工具會保留原始長寬比。大多數 favicon 產生器會將你的輸入裁切或加黑邊成正方形，這可能會把位於左上角的標誌裁掉，或把寬幅橫幅拉寬。永遠先預覽最小尺寸，因為在 180x180 看起來還可以的標誌，到了 16x16 時細線糊成一片，可能會變得無法辨識。
第二個陷阱是檔案格式。一些較舊的教學文件仍建議將 favicon 存成 .ico 檔，但現代瀏覽器處理 PNG favicon 完全沒問題，而且 PNG 能讓你的匯出流程更單純。第三個問題是忘記快取：瀏覽器會積極地快取 favicon，有時甚至長達數天，因此即使你更新了 HTML，新圖示仍可能沒有出現。強制重新整理、使用無痕視窗，或在圖示路徑加上破快取的查詢字串，通常能強制瀏覽器去抓取新檔案。
將 Favicon 產生與其他圖片前置作業搭配
如果你的來源圖片是一張大型照片或分層匯出的檔案，你經常需要在產生 favicon 之前先進行前置處理。內嵌色彩設定檔的厚重 JPEG 會讓每個匯出的圖示檔案大小膨脹，因此先透過 Image Compressor 處理，能在不影響可見畫素的情況下縮減檔案大小。當你的來源是向量或分層設計時，透過 SVG to PNG Converter 匯出成乾淨的方形 PNG，能保持邊緣銳利，避免最終圖示出現 JPEG 失真。
當 favicon 套件上線後，你可能還會想裁切新分頁的螢幕擷圖，用於說明文件或社群貼文。Image Cropper 是從瀏覽器擷圖中單獨擷取分頁列的快速方法。這些步驟都不是必要的，但它們能讓整體工作流程與 Favicon Generator 所採用的全在瀏覽器內做法保持一致。
部署後驗證 Favicon
在你把 HTML link 程式碼片段貼到網站並重新部署之後，請在桌機瀏覽器的全新無痕視窗中開啟實際的 URL。分頁應該會在一兩秒內顯示新圖示。如果圖示沒有出現，請再次確認複製的程式碼片段中的檔案路徑，與你伺服器上實際的資料夾結構相符，並確認檔案是以二進位模式而非文字模式上傳，因為文字模式可能會損毀 PNG 標頭。若需要更深入的疑難排解，MDN 關於 link 標籤的文件會說明所有可接受的 rel 值以及瀏覽器如何解讀它們。
你也可以透過 iOS 上 Safari 的「加入主畫面」與 Android 上 Chrome 的「安裝網站」選項來測試行動介面。兩者會分別讀取 apple-touch-icon 與 web app manifest，因此請確認那些 link 標籤指向 Favicon Generator 所產生的 180x180 與 192x192 PNG。如果一切對齊，從桌機的分頁列到手機的主畫面，你的標誌都能一致地呈現——而且全部來自同一張本機來源圖片。
如果你正在權衡各種選項，View EXIF Data from Any Photo Without Uploading 對此有詳細說明。