要讓網站上的網站圖示正常運作，請從本機圖片產生精確的正方形 PNG 檔案，並在文件 head 內加入對應的 HTML link 元素——標準的 16、32 與 48 像素尺寸可涵蓋最常見的瀏覽器分頁與書籤表面，而每個 link 都使用 rel icon 關係，搭配 image/png 類型，以及與檔名相符的 sizes 標記。網站圖示是出現在瀏覽器分頁中網頁標題旁、書籤旁，以及某些桌面或行動裝置捷徑表面上的小圖示。實際讓該圖示顯示在你的網站上之前，有三件事必須對齊：尺寸正確的圖片檔案、位於頁面 head 中指向這些檔案的 HTML link 元素，以及檔案本身可從相同來源或瀏覽器能解析的路徑存取。常見的障礙是只擁有高解析度的標誌，並假設瀏覽器會處理其餘部分——大多數瀏覽器會請求特定像素尺寸，並忽略任何不符合的內容。本文將逐步說明產生這些 PNG 檔案、撰寫對應標記，以及部署結果的工作流程，讓你所預期的圖示確實顯示出來。
在網站上設定網站圖示實際上涉及什麼
網站圖示是出現在瀏覽器分頁、書籤旁，以及某些工作列或主畫面捷徑中的小圖示。要將它放到你的網站上，有三件事必須對齊：你需要尺寸正確的圖示圖片檔案、你需要在頁面 head 中告訴瀏覽器這些檔案位置的 HTML link 元素，且這些 link 元素必須從相同來源或瀏覽器能解析的路徑提供。常見的障礙是只擁有高解析度的標誌，並假設瀏覽器會處理其餘部分——大多數瀏覽器會請求特定尺寸，並忽略任何不符合的內容。Favicon Generator 可在同一處產生該配對的兩半：精確尺寸的 PNG 檔案與對應的 rel icon link 程式碼片段，確保檔名、sizes 標記與媒體類型保持一致。
為何本機圖片是最可靠的來源
網站圖示組從單一來源圖片開始。從線上遠端網站擷取圖示——抓取其他網域的網站圖示——並不穩定：遠端檔案可能變更、以限制性的 CORS 標頭提供，或是瀏覽器無法重複使用的 ICO 容器。從你已擁有的檔案著手，例如標誌、文字標誌或字母組合，可提供穩定且可重現的起點，並讓你在任何內容被點陣化之前控制構圖。Favicon Generator 接受 PNG、JPEG 與 WebP 檔案，最高可達 25 MB，並在瀏覽器解碼後拒絕超過 4000 萬像素的輸入。SVG 與動畫輸入在設計上予以排除，以避免可執行腳本的向量內容與不明確的影格選擇。如果你的來源被拒絕，請先將其轉換為支援的靜態點陣格式——例如透過 SVG to PNG Converter 將 SVG 向量點陣化，或在產生圖示前從動畫素材匯出單一靜態影格。為了可靠的發布工作流程，請從簡單、高對比度的正方形標誌開始。任何更複雜的設計在 16 與 32 像素——瀏覽器最常請求的兩個尺寸——下都會遺失細節，且中心裁切會切掉任何靠近邊緣的內容。
為你的網站產生網站圖示檔案與 HTML 連結
請依照下列步驟，為你的網站產生可運作的網站圖示組與對應的 HTML 標記。
- 選擇一張主要主體靠近畫面中央的 PNG、JPEG 或 WebP 檔案。
- 開啟 Favicon Generator 並從你的電腦選擇該檔案——不會上傳任何內容；檔案會在你的瀏覽器分頁中於本機解碼。
- 選擇你實際需要的正方形 PNG 尺寸。此工具提供 16、32、48、64、128、256 與 512 像素的輸出。
- 產生圖示。每個選定的尺寸會依其請求的自然尺寸，從解碼後的來源獨立呈現，因此 16 像素的下載檔並非 128 像素結果的縮小預覽。
- 在 100% 縮放比例下逐一檢視每個結果，特別是 16 與 32 像素的檔案。瀏覽器在縮放時會平滑像素，因此非常小的圖示可能會讓細線或細小文字變得柔和。
- 個別下載每個圖示。每個結果都是 image/png Blob，檔名類似 favicon-32x32.png，而下載某個連結會得到該連結所指定之確切尺寸的檔案。
- 複製工具產生之對應的 HTML link 程式碼片段。每行使用標準的 rel icon 關係、image/png 類型、正方形 sizes 標記，以及根目錄相對的檔名。僅複製你實際會放到網站上之檔案對應的程式碼行。
- 將選擇的 PNG 檔案上傳到你伺服器上對應的根目錄路徑，或編輯每個 href 以符合你實際的素材目錄。
- 將 link 元素貼到每個應顯示該圖示之頁面的文件 head 中。
- 強制重新整理頁面。如果仍顯示舊圖示，請清除網站資料或瀏覽器快取以強制重繪。
這就是從本機圖片到線上網站上可運作之網站圖示的完整路徑：產生檔案、複製對應的標記、上傳素材，並驗證已部署頁面的原始碼與網路路徑。
中心裁切規則如何影響你的來源
網站圖示能容納的細節非常有限，因此來源的構圖比原始解析度更為重要。Favicon Generator 使用置中覆蓋裁切：它從圖片中央擷取盡可能大的正方形，然後將該正方形縮放至每個請求的像素尺寸。橫向圖片會從左右兩側等量裁切；直向圖片會從上下兩側等量裁切；正方形來源則完全不會被裁切。例如，800 乘 500 的橫向來源會變成從左邊緣起 150 像素處開始的 500 乘 500 正方形——左側裁切 150 像素、右側裁切 150 像素，因為 800 減 500 等於 300，除以 2 等於每側 150 像素。600 乘 900 的直向來源會變成從頂部起 150 像素處開始的 600 乘 600 正方形，頂部裁切 150 像素、底部裁切 150 像素，因為 900 減 600 等於 300，除以 2 等於每側 150 像素。這個可預測的規則適用於標誌、符號、字母組合與插圖——也就是主要主體已靠近中央的內容。它並非互動式裁切編輯器，因此當主體刻意偏離中央時——例如需要保留左側邊緣的寬幅文字標誌——請先使用影像裁切器重新構圖，再從重新構圖後的來源產生圖示。
你實際需要的像素尺寸
此產生器提供七種可選擇的像素尺寸。大多數網站僅需要其中少數幾個，而你略過的尺寸應與你從 HTML 中移除的 link 行一致，讓每個 href 都指向你實際上傳的檔案。
| 像素尺寸 | 常見用途 |
|---|---|
| 16 x 16 | 經典瀏覽器分頁圖示、網址列表面 |
| 32 x 32 | 高 DPI 瀏覽器分頁、書籤列、小型工作列圖示 |
| 48 x 48 | Windows 工作列捷徑、中等密度表面 |
| 64 x 64 | 較大的書籤與側邊欄表面 |
| 128 x 128 | 桌面表面與較大的預覽圖磚 |
| 256 x 256 | 高 DPI 桌面、較大的預覽用途 |
| 512 x 512 | 最大預覽或素材用途 |
多個圖示連結可讓瀏覽器選擇適當的資源，但最終選擇仍取決於瀏覽器行為——此工具並不保證特定瀏覽器、書籤表面或作業系統會顯示哪個尺寸。對大多數網站而言，產生 16、32 與 48 即可涵蓋價值最高的表面。如果你還針對會呈現較大圖示的桌面環境，請新增 64 或 128。略過你不會放到網站上的尺寸：在未上傳對應檔案的情況下複製每一行 link，會產生瀏覽器將悄悄忽略的無效 href。
檢查、部署並清除舊快取
兩項檢查可保護你避免部署損壞的圖示組。首先，在發布前以實際大小檢查最小的檔案。在 100% 縮放比例下開啟 16 與 32 像素的下載檔，確認主體清晰可辨，且沒有重要細節被中心裁切切掉。其次，部署後，驗證已部署頁面的原始碼以及瀏覽器實際請求的網路路徑——href 中的拼字錯誤或遺漏的檔案，是分頁圖示空白的常見原因。如果部署新檔案後仍顯示舊圖示，請清除網站資料或瀏覽器快取。瀏覽器會積極快取網站圖示，強制重新整理，或等待快取過期，往往是強制重繪的唯一方法。在發布前，有幾項構圖要點值得注意：PNG 與 WebP 來源可保留檔案中已存在的透明度，JPEG 來源則從一開始就沒有透明像素。如果你的標誌具有透明或淡色的邊緣，請同時在淺色與深色背景下檢視結果。此工具不會為不透明的來源新增透明度，也不會自動移除背景，因此請據此規劃你的來源檔案。
此產生器的功能與限制
此工具的範圍刻意設定得很窄。Favicon Generator 僅產生 PNG 瀏覽器網站圖示與對應的 HTML 程式碼片段，不會產生其他內容。它不會建立 ICO 容器、SVG 圖示、Apple touch 圖示、Android 圖示組、固定分頁素材、網頁應用程式清單，或平台專屬的套件。如果你需要這些內容，請先產生 PNG 組，再依個別工作流程進行轉換或封裝。所有作業都在當前的瀏覽器分頁中執行。來源影像於本機解碼，使用 Canvas 繪製，永遠不會傳送至處理伺服器。用於預覽與下載的 Object URL 會在結果被取代或頁面關閉時撤銷，過期的非同步算繪工作無法取代較新的選擇。此工具負責準備素材與標記；它不會修改你的網站、上傳檔案，或確認生產環境的快取行為。HTML 程式碼片段使用標準的 rel icon 關係、image/png 類型、正方形 sizes 標記，以及根目錄相對的檔名——與 MDN rel icon 參考資料中描述的格式一致。如果你的網站已透過 CMS 或佈景主題宣告圖示，只要檔名不衝突，新的 link 元素可與該宣告並存。
如果你正在權衡選項，How to Get a Favicon in Chrome From a Local Image 對此有詳細說明。
如果你正在權衡選項，How to Get a Favicon Hash From a Local PNG File 對此有詳細說明。