若要從 SVG 檔案產生 favicon，請先將 SVG 點陣化為 PNG 或 WebP，再將產生的點陣圖送入 Favicon Generator。Favicon Generator 僅接受 PNG、JPEG 與 WebP，直接拒絕 SVG 輸入——SVG 與動畫來源會被排除，以避免可執行的向量內容以及模糊的影格選取。一旦來源成為靜態點陣圖，後續工作流程就會產生標準的正方形 PNG 圖示與對應的 HTML link 標籤，所有處理皆在瀏覽器分頁內完成，不會將影像上傳到伺服器。中央裁切的運算方式與任何來源相同：產生器從解碼後影像的正中央擷取最大的正方形，再將每個要求的尺寸繪製到各自的畫布上，並匯出 image/png Blob。檔案名稱類似 favicon-32x32.png，而對應的 HTML 標籤則使用標準的 rel=icon 關聯、image/png 類型，以及與檔案完全一致的正方形 sizes 值，使資產與標記保持對齊。
為何 Favicon Generator 不直接接受 SVG
技術上的原因是，SVG 可能帶有可執行的 JavaScript、動畫標籤、foreign object 參照，以及外部字型連結，瀏覽器必須先將所有這些內容扁平化為靜態點陣圖，favicon 程式碼路徑才能安全處理。為了避免在這些輸入上默默出現錯誤行為，工具會預先拒絕它們；若來源遭拒，文件記載的復原方式是在重試前先將其轉換為支援的靜態點陣格式。這個額外步驟正是本文後續要說明的內容。
實際的原因更為單純。favicon 是一組固定的像素檔案，而非可重新算繪的圖形。以 favicon-32x32.png 儲存的 32x32 favicon 只包含 1024 個顏色像素，沒有任何瀏覽器會即時重新向量化這些像素，從原始 SVG 還原幾何形狀。一旦下載了小型圖示，瀏覽器就會依所要求的尺寸原樣顯示。因此，以高解析度將 SVG 點陣化一次就是正確的做法，而 PNG 或 WebP 才是正確的輸出格式，因為兩者都能保留 SVG 既有的透明度。
在瀏覽器中將 SVG 轉換為 PNG 或 WebP
第一個真正的步驟是將 SVG 轉換為 favicon 工具能讀取的靜態點陣圖。請在瀏覽器分頁中開啟 SVG-to-PNG 轉換器，從磁碟載入檔案；選擇較大的輸出尺寸，例如較長邊 512 或 1024 像素，讓後續 favicon 步驟在裁切與縮放時，來源仍保有足夠的細節。若您的 SVG 已有透明背景，請在輸出時保留透明度；若是純色背景，請以白色為底進行點陣化，方便日後檢視。PNG 保留 SVG 內含的 alpha 通道；WebP 則以更小的檔案大小提供類似的透明度。重點是讓轉換器留下一個 Favicon Generator 能接受的本地點陣檔。
這個階段常見的錯誤是因為記得 favicon 尺寸是 32x32，就以 32x32 進行點陣化。等到 favicon 工具執行時，那個小尺寸來源已經遺失了 32 像素輸出原本能保留的大部分細節。請盡可能以最大尺寸開始——較長邊至少 512 像素——讓 favicon 步驟負責縮取樣。這樣的結果會更準確，因為 favicon 工具會從同一個高解析度來源繪製每個要求的尺寸，而非從一個小的中間預覽圖著手。
如需逐步了解轉換本身，請參考我們的指南：在瀏覽器中立即將 SVG 轉換為 PNG 或 JPG。該文章專注於點陣化步驟本身，與下文說明的 favicon 工作流程可無縫搭配。
從點陣化的影像產生正方形 Favicon 檔案
當 SVG 已作為 PNG 或 WebP 存放在磁碟上後，剩下的工作流程就是在 Favicon Generator 中執行的一小段程序。整個工具都在當前的瀏覽器分頁中執行；來源影像會在本地解碼，使用 HTMLCanvasElement API 繪製，且絕不會上傳到伺服器。以下步驟假設您已準備好點陣化的來源。
- 在瀏覽器分頁中開啟 Favicon Generator，並選擇您剛剛建立的 PNG、JPEG 或 WebP 檔案。挑選主要主體位於畫布中央附近的來源——產生器在縮放前會從正中央擷取最大的正方形，因此一個本就置中的標誌不會損失任何內容。
- 勾選您想發佈的正方形 PNG 尺寸。工具支援 16、32、48、64、128、256 與 512 像素的輸出，您可以依需要選擇多寡。大部分網站只需要 16、32 與 48；加入 64 或 128 可讓 retina 瀏覽器獲得更清晰的選擇。
- 觸發產生。每個選定的尺寸會從解碼後的來源以自然尺寸獨立算繪，再匯出為 image/png Blob，檔名類似 favicon-32x32.png。預覽面板僅供目視檢查——下載連結會提供連結文字中標示的確切像素尺寸。
- 下載您實際打算部署的檔案。將每個檔案儲存到可預期的位置；稍後您會將它們移到網站根目錄中對應的路徑。
一個簡短的計算範例。假設點陣化的來源是 1200x800（橫向標誌）。最大的中央正方形就是較短的邊，亦即每邊 800 像素。因此裁切會從左邊緣移除 (1200 − 800) / 2 = 200 像素，並從右邊緣移除 200 像素，留下 800x800 的正方形。接著將這個 800x800 的正方形繪製到 32x32 的畫布上，因此輸出中的每個像素對應來源中的 800 ÷ 32 = 25 個像素，並由瀏覽器的重取樣步驟加以平均。了解這個比例有助於預測原始檔案中的細線在小尺寸下是否仍可見——若一條線在 800 像素的正方形中僅有一個來源像素寬，它會與相鄰像素平均，並可能在 32 像素的輸出中消失。
可用輸出尺寸一覽
下表列出 Favicon Generator 可匯出的所有正方形尺寸，以及對應的寫入格式。每一列都對應一次從解碼後來源的獨立算繪，而非重新縮放的預覽。
| 選定尺寸 | 輸出格式 |
|---|---|
| 16 × 16 | image/png |
| 32 × 32 | image/png |
| 48 × 48 | image/png |
| 64 × 64 | image/png |
| 128 × 128 | image/png |
| 256 × 256 | image/png |
| 512 × 512 | image/png |
以實際尺寸檢查最小的檔案
這是多數初學者會略過的步驟，卻是最能在 favicon 上線前抓出問題的環節。請在任何影像檢視器中開啟 16x16 與 32x32 的下載檔案，並縮放至 100%——不要使用符合視窗。瀏覽器在 canvas 縮放時會啟用平滑處理，因此細筆觸與微小文字在最小尺寸下可能變得模糊，在 256 像素看起來銳利的標誌，到了 16 像素可能變成一團灰色污跡。解決方法通常不是更多的程式碼，而是讓來源的筆觸加粗，或為最小尺寸設計更簡潔的標誌。
同時也要留意中央裁切。產生器並未提供互動式裁切工具；若您的 SVG 主體偏離中央，該細節早已被切掉。一個簡單的測試：以 100% 開啟點陣化的來源，並在心中於其正中央畫一個正方形——正方形以外的任何內容都不會出現在 favicon 中。若裁切造成影響，請回到來源重新置中主體、重新點陣化，再重新執行 favicon 步驟。
若透明度在點陣化過程中保留下來，請在白色與深色兩種瀏覽器分頁背景下檢視最小的檔案。淡色邊緣與細外框可能在淺色背景上消失，在深色背景上看起來像光暈；這個限制來自於來源影像，而非工具本身。
將 HTML Link 標籤加入網站的 head
每個產生的檔案都會隨附一段對應的 link 程式碼片段指向它。格式遵循 HTML 規範中所記載的標準 rel=icon 關聯，並搭配 image/png 媒體類型，以及與檔名相符的正方形 sizes 權標。以下是一對較小尺寸的典型範例：<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 與 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">。
僅貼上您實際打算放到網站上的檔案對應的程式碼。請保留 image/png 媒體類型以及工具為您寫入的確切 sizes 權標——兩者都很重要，因為瀏覽器會依據它們挑選資源。若您的資產目錄不在網站根目錄，請編輯每個 href，使其指向檔案實際所在的位置，例如 /assets/favicon-32x32.png。將這些程式碼貼到頁面的 head 中，將 PNG 檔案上傳到對應路徑，然後重新載入。
您可以一次發佈多個尺寸，讓瀏覽器自行挑選；這是建議的做法，因為它讓某個瀏覽器選擇 16 像素圖示的同時，另一個瀏覽器能為高 DPI 分頁介面選擇 32 像素或 64 像素的圖示。最終某個特定瀏覽器、書籤介面或作業系統實際顯示哪個圖示，屬於瀏覽器的行為，而非工具的保證——部署後若仍看到舊圖示，請清除網站資料或瀏覽器快取。
Limits and Edge Cases Worth Knowing
A few constraints are easy to miss because they do not show up until you hit them. The input is limited to PNG, JPEG, and WebP files up to 25 MB by compressed size; after the browser has decoded the source, the tool rejects images above 40 million pixels before allocating the output canvases. That post-decode budget reduces the canvas memory work, but it cannot prevent the browser's initial image decode from using memory or failing on an unusually large or malformed file. Compressed file size alone does not describe decode memory, which is why an SVG exported at a small file size can still trip the pixel-count check if you rasterize it to 8000 pixels on a side.
The output is intentionally narrow. The tool produces square PNG browser favicons and matching HTML snippets. It does not produce an ICO container, an SVG icon, an Apple touch icon, an Android icon set, a pinned-tab asset, a web app manifest, or a platform-specific package. It does not add transparency to an opaque source, and it does not remove a background automatically. If your site needs an .ico archive or a manifest, generate the PNGs here and finish the rest of the packaging with a tool built for that step.
Object URLs used for previews and downloads are revoked when results are replaced or the page closes, so a stale preview link from a previous run cannot be downloaded after you regenerate. Stale asynchronous render jobs are also discarded in favor of a newer selection. Treat each tab session as self-contained: regenerate before downloading, and download promptly.
For a dependable publishing workflow, the shape that always works is the same. Rasterize the SVG to a high-resolution PNG, run that PNG through the Favicon Generator, inspect the 16 and 32 pixel files at 100 percent, upload the chosen files to your site, paste the matching link lines into the head, and verify the deployed page source and the network tab. Each step is a few clicks, none of them upload the source, and the deliverables — square PNG files plus matching HTML icon links — slot straight into a normal web project.
If you're weighing options, Convert an SVG to JPG in Your Browser: A Practical Walkthrough covers this in detail.