若要在 HTML 中放入 favicon，請將一個或多個小型 PNG 圖示儲存到你的網站，並在 head 內以 link 標籤引用每個檔案，該標籤需使用 rel='icon'、type='image/png'、sizes='WxH' 以及指向該檔案的 href。瀏覽器會讀取這些 link 元素、下載對應的檔案，並顯示最符合當前介面（例如分頁列、書籤或儲存的捷徑）的圖示。現代瀏覽器接受在同一個 head 中出現多個 link rel='icon' 項目，因此你可以從同一張來源圖片提供數種像素尺寸，讓用戶端挑選最合適的那一個。link 標籤本身是你唯一需要的 HTML；該檔案必須存在於你所指向的 href 路徑上，且該路徑必須可從你的公開網站連線存取。favicon 純粹是一種視覺識別符，而非互動元素，因此它不會出現在頁面主體內，也不帶有任何文字。其餘的一切就是選擇要連結哪個檔案、上傳到哪裡，以及想覆蓋哪些介面的問題。HTML 的部分很短，通常只有三或四行 link，但檔案選擇與上傳路徑的重要性並不亞於標記本身。
HTML favicon link 標籤詳解
HTML 中的每個 favicon 都是透過放置於文件 head 內的一個 link 元素來宣告。共有四個屬性承載其語意：rel 告訴瀏覽器這是個圖示連結、type 宣告檔案的 MIME 類型、sizes 以 WxH 格式給出精確的像素尺寸、href 則指向該檔案的公開位置。對於 32 像素圖示來說，一行完整的標記通常會像這樣：link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'。
rel='icon' 的值是 WHATWG HTML 標準的一部分，而 MDN 關於 rel 屬性的參考文件 記載了 icon 關鍵字，以及 icon 連結所支援的標準 href、type、sizes 與 media 屬性。你可以在同一個頁面中放入多個 icon 連結，並且可以為每種格式各給一個 link 元素，藉此混用 PNG 與 SVG 來源。當兩個 link 標籤描述相同的像素尺寸時，瀏覽器會保留最後解析到的那一個，並忽略先前符合的項目。
link 元素本身只是宣告性質。瀏覽器只有在真正需要圖示時才會擷取該檔案，因此缺少圖示或圖示載入緩慢，並不會阻塞頁面其餘部分的渲染。這種分離也正是為什麼 href 中的錯字或檔案的 404，要等到你去查看分頁列時才會被發現。即使每個 favicon 連結都指向不存在的檔案，頁面本身仍會正常載入。
產生並加入 favicon 到 HTML
使用 Favicon 產生器 一次完成圖示檔案與對應 link 標籤的產出。將 favicon 放進 HTML 的完整步驟如下：
- 在瀏覽器分頁中開啟 Favicon 產生器。無需安裝任何軟體，也不需要註冊帳號。
- 選擇一張 PNG、JPEG 或 WebP 來源圖片，其主要主體須位於畫面中央附近。
- 勾選你想要發佈的正方形像素尺寸。此工具支援 16、32、48、64、128、256 與 512 像素的輸出。
- 點擊產生，然後在下載任何檔案之前，先以實際尺寸檢視頁面上的預覽結果。
- 下載你想發佈的每張 PNG。檔名遵循 favicon-WxH.png 的格式，以便與工具產生的標記對應一致。
- 將 PNG 檔案上傳到網站中你打算從 HTML 引用的路徑位置。
- 從工具中複製對應的 HTML link 程式碼行，並貼到你的文件 head 中、置於任何樣式表連結之上。
- 重新載入已部署的頁面，並在網路面板中確認每個 href 都解析為一個狀態為 200 OK 的真實檔案。
產生器會根據原始解碼後的來源，獨立渲染每一個要求的尺寸，因此標示為 favicon-32x32.png 的下載檔案，正好是 32 乘 32 像素，而非從頁面預覽放大縮來的縮圖。它所產生的每段程式碼都使用標準的 rel='icon' 關係、image/png 的 MIME 類型、相應的正方形 sizes 權杖，以及根目錄相對的 href，這讓檔案與標記無需手動編輯即可保持一致。
挑選一張縮放後仍清晰可辨的來源圖片
16 像素的正方形能容納的細節極其有限，因此來源圖片的選擇比標記更為重要。高對比度的形狀、單一字母的標誌，以及簡單的符號在小尺寸下依然清晰；而纖細的筆觸、細膩的漸層，以及完整的文字標誌則通常會糊成一團。正方形標誌、字母組合標誌與置中的插畫是最容易處理的輸入，因為沒有任何重要元素會落在邊緣附近。
Favicon 產生器採用中央裁切的方式。它會從來源圖片的正中央取出最大可能的正方形區域，再將該正方形縮放為所要求的尺寸。橫向的來源會從左右兩側等量裁掉一部分，直向的來源會從上下兩側等量裁掉一部分，而正方形的來源則完全不裁切。這種可預測的規則，正是中央構圖主體成為最安全選擇的原因。
若你的圖片最重要的部分不在中央，請先使用 圖片裁切工具 進行裁切，讓主體落在中央，再將裁切後的正方形送入 favicon 工具。產生器本身並非互動式的裁切編輯器，因此預先進行裁切，正是讓圖示在縮減後仍能保留主體、不被邊緣犧牲的關鍵差別。
一張大於 256 乘 256 像素的正方形來源是個理想的起點。它既足夠大，使每個縮小後的尺寸都能保持清晰的邊緣；又不會過大，使解碼步驟遠低於工具 4000 萬像素的安全上限。輸入格式限於 PNG、JPEG 與 WebP，且最大 25 MB，SVG 或動畫格式則被刻意排除。
解讀產生的 HTML link 程式碼行
Favicon 產生器產出的每張 PNG，都會伴隨一行可貼入頁面 head 的對應 link 程式碼。這些行程式碼都遵循同一個結構：rel='icon'、type='image/png'、sizes='WxH'、href='/favicon-WxH.png'。它們易於瀏覽與編輯，且檔名已經與標記對應，因此你無須手動保持兩者同步。請只複製那些你確實打算發佈的檔案所對應的程式碼行；指向你從未上傳之檔案的殘留片段，在網路面板中只會直接出現 404。
下表摘要列出每個產生尺寸最常見的用途。瀏覽器會決定實際顯示哪一個檔案，因此請將這些視為實務上的角色，而非絕對的保證。
| 像素尺寸 | 常見介面 |
|---|---|
| 16x16 | 標準顯示器上分頁列的最小備援圖示 |
| 32x32 | 標準瀏覽器分頁與書籤圖示 |
| 48x48 | 部分作業系統上的桌面捷徑圖示 |
| 64x64 | 高 DPI 分頁與釘選介面 |
| 128x128 | 較大的書籤圖示與連結預覽 |
| 256x256 | 高解析度啟動器與社群分享卡片 |
| 512x512 | 供進一步縮減的參考來源解析度 |
對於大多數網站來說，發佈 16、32 與 48 像素的檔案，便足以涵蓋常見的分頁、書籤與捷徑介面。當你也會在以更高解析度擷取圖示以供自身預覽的平台分享該頁面時，較大尺寸便派上用場；而 512 像素的檔案同時也可作為任何需要進一步縮減的工具之乾淨來源。
將圖示檔案放置於網站的何處
每個 link 標籤中的 href 必須對應到該檔案的真正公開 URL。Favicon 產生器預設會寫入像 /favicon-32x32.png 這樣的根目錄相對路徑，這表示圖示檔案應置於網站根目錄下，例如 https://example.com/favicon-32x32.png。這種放置方式與「瀏覽器在沒有 link 標籤時會自動檢查 /favicon.ico」這個慣例相符，因此將圖示置於根目錄可作為備援路徑最安全的預設值。
若你的檔案位於子目錄中，請在貼上之前編輯每個 href。一行指向 /assets/favicon-32x32.png 的程式碼，必須對應到位於完全相同路徑的真實檔案；即使只有一個壞掉的 href，也會在沒有任何頁面錯誤的情況下悄悄無法顯示。部分團隊會將所有靜態資源統一放在 /public、/static 或 /assets 下；無論你選擇哪一種，link 標籤中的路徑與伺服器上的路徑都必須相符，包含大小寫也要一致，因為區分大小寫的伺服器會將 favicon-32x32.png 與 Favicon-32x32.png 視為兩個不同的檔案。
與大多數頁面資源相比，少量 PNG 圖示所佔的容量微乎其微，因此將它們與 CSS 和 JavaScript 放在同一處託管是可行的。只需確認託管層不會在上傳時竄改或重新命名檔案，並且 link href 與瀏覽器實際收到的位元組之間沒有任何重新導向。
部署後驗證 favicon
貼上 link 標籤之後，請查看頁面原始碼，確認圖示程式碼行確實位於 head 內，且 href 值正確無誤。開啟瀏覽器的網路面板並重新載入頁面；每個 favicon URL 應回傳 200 OK 狀態與 image/png 的 MIME 類型，而非重新導向到登入頁面或出現 404。link 元素屬宣告性質，因此瀏覽器會以延遲方式擷取檔案，這代表在分頁真正顯示給使用者之前，相關請求可能不會出現。
若在 HTML 與檔案皆已更新之後，舊版圖示依然持續顯示，幾乎可以確定是快取資料所致。瀏覽器會積極地、跨工作階段地快取 favicon，並且可能也會從歷史紀錄檢視中將其釘選。請強制重新載入頁面、清除該網域的網站資料，並關閉任何在此次變更之前就已開啟的分頁。在共用電腦上，也請在刪除設定檔目錄中的快取項目後，重新啟動瀏覽器以清除瀏覽器的 favicon 快取。
確認新檔案確實有被提供的一個快速方法，是將其中一個圖示 URL 直接在新分頁中開啟。圖片應以其宣告的尺寸顯示，並將其另存時應得到一張像素尺寸相符的 PNG。若實際得到的檔案尺寸或格式不符，表示你所貼上的 link 程式碼與產生器產出的內容不一致，該 href 需要修正。
Favicon HTML problems and quick fixes
A few recurring issues show up when an icon does not look right after the link tags are in place.
If the icon looks blurry at the smallest sizes, the cause is usually the source image rather than the HTML. Thin lines and small text smooth out when the browser resizes them down to 16 pixels, so start with a bolder source and inspect the 16 and 32 pixel downloads at actual size before publishing. The generator renders each size independently from the decoded source, so the blur comes from the composition, not from the tool reusing a small preview.
If the subject appears cut off in the icon, the source was not centered. The Favicon Generator always crops to a centered square, so an off-center subject has to be re-cropped in a dedicated cropper first, then fed back into the generator. A landscape picture loses equal amounts from the left and right edges, and a portrait picture loses equal amounts from the top and bottom, so plan the source composition around that rule.
If the browser ignores the PNG link lines and shows nothing, an old /favicon.ico at the site root may still be picked up. The HTML link tags take precedence over the legacy fallback when both are present, but a stale cache or a server redirect can still serve the older file. Replace the root favicon.ico or rename it so the new PNGs win, and clear the favicon cache so the change is visible immediately.
If the icon shows a pale box around the subject, the source PNG had transparency and the tab strip color is showing through. Inspect the icon on both light and dark tab backgrounds, and if the edges look weak on dark mode, add a subtle outline or a colored background plate in your image editor before regenerating. PNG sources keep transparency that already exists, while JPEG sources start with no transparent pixels, so the source format also affects how the icon sits on different tab colors.
If you're weighing options, Favicon Too Big? Make Square PNG Sizes That Fit covers this in detail.
If you're weighing options, Icon Too Large? Resize It to Exact Favicon Sizes covers this in detail.