網站 icon 是什麼？和 favicon 有什麼不同？
網站 icon 常被用來指兩件事：一種是顯示在瀏覽器標籤、書籤與搜尋結果旁的 favicon；另一種是網站介面裡用在按鈕、導覽列、服務項目的視覺符號。先分清楚用途，尺寸、格式和素材來源才不會選錯。
網站 icon、favicon、網頁小圖示差異
| 名稱 | 主要用途 | 常見格式 | 判斷重點 |
|---|---|---|---|
| favicon | 瀏覽器標籤、書籤、搜尋結果、網址列相關位置 | ICO、SVG、PNG | 小尺寸辨識度、穩定網址、正確 HTML 設定 |
| 網站 icon | 泛指網站使用的小圖示，可能包含 favicon 與介面 icon | SVG、PNG、ICO | 先確認是品牌識別用途，還是介面輔助用途 |
| 網頁介面 icon | 按鈕、功能列、服務項目、分類、導覽輔助 | SVG、Icon font、PNG | 風格一致、商用授權、線條粗細與圓角規則 |
會出現在哪些地方
favicon 最常出現在瀏覽器分頁、書籤列、瀏覽紀錄、Google 搜尋結果，以及使用者把網站加入手機主畫面時的圖示。網站介面 icon 則會出現在頁面內，例如選單、表單按鈕、服務卡片、功能說明區塊與頁尾連結。
實務上，很多網站的問題不是沒有 icon，而是把 logo、favicon、UI icon 混用。logo 可以傳達品牌名稱，favicon 則要在 16px 或 32px 的小空間裡仍然認得出來；介面 icon 則要幫助使用者理解功能，不該搶走品牌識別的角色。
一句話判斷
如果你想讓瀏覽器標籤或 Google 搜尋結果出現網站小圖示，處理的是 favicon；如果你想找購物車、搜尋、選單、服務特色這類頁面內符號，處理的是網站介面 icon 素材。
先判斷你需要哪一種網站 icon
搜尋「網站 icon」前，先確認你要解決的是 favicon 顯示問題、網站介面素材問題，還是品牌 icon 系統整理問題。這三種任務的檔案、尺寸、授權和驗收方式都不同。
我要設定 favicon
如果你的問題是瀏覽器分頁沒有小圖示、Google 搜尋結果旁邊沒有品牌圖示，或網站換了 logo 但分頁 icon 還是舊的，優先走 favicon 設定路線。這條路線要檢查檔案格式、尺寸、HTML head、CMS 上傳位置、根目錄檔案與快取。
我的判斷是，favicon 不適合只丟一張 16x16 圖就結案。2026 的網站至少要考慮傳統瀏覽器、現代瀏覽器、iOS 主畫面，以及 PWA 或 Android 裝置可能讀取的 manifest icon。
我要找網站介面 icon
如果你的目標是替網站內的服務項目、功能按鈕、分類頁或導覽列找小圖示，重點會變成素材風格與授權。這時候不需要研究 favicon.ico，而要確認 SVG 是否可改色、是否可商用、是否需要標註來源，以及整組 icon 的線條粗細是否一致。
我要整理品牌 icon 系統
如果你正在重整品牌識別、網站改版或建立設計規範，就不該只處理單一 favicon。你需要整理 favicon、Apple Touch Icon、PWA icon、網站介面 icon、社群頭像與品牌符號的關係，避免每個平台都長得像不同品牌。
選擇流程
| 現在遇到的情況 | 優先處理項目 | 檢查成果 |
|---|---|---|
| 瀏覽器分頁沒有小圖示 | favicon 檔案與 HTML link | 分頁、書籤、瀏覽紀錄能顯示正確圖示 |
| Google 搜尋結果沒有網站小圖示 | favicon 規格、可檢索網址、Google 更新時間 | 圖示符合正方形與穩定網址要求，等待重新擷取 |
| 網站服務項目缺少小圖示 | SVG icon 素材與授權 | 同一組風格、可商用、尺寸與色彩一致 |
| 品牌改版後各處 icon 不一致 | 品牌 icon 系統盤點 | 檔名、尺寸、用途、版本與使用規則清楚 |
2026 網站 favicon 尺寸與格式對照表
一般網站建議至少準備 favicon.ico、favicon.svg、apple-touch-icon.png，以及 manifest 用的 192x192 與 512x512 PNG。Google 搜尋結果則應使用正方形、穩定網址、可被檢索的 favicon，尺寸以 48x48 或 48 的倍數較保險。
Google 搜尋結果 favicon 規格
Google 搜尋結果顯示的網站小圖示，重點不是只要有上傳就會出現。圖示需要是正方形，網址要穩定，Googlebot 要能存取，且不應該頻繁更換檔案路徑。瀏覽器可能能讀到很小的 favicon，但如果你在意搜尋結果顯示，我會把 48x48 或 48 的倍數當成較穩的輸出規格。
不要宣稱更新後會立刻顯示。搜尋結果是否更新取決於 Google 重新擷取與系統處理時間，網站端能做的是把檔案、路徑、格式與可檢索狀態處理正確。
ICO、SVG、PNG 怎麼搭配
| 檔案 | 建議尺寸 | 用途 | 備註 |
|---|---|---|---|
| favicon.ico | 可包含 16x16、32x32、48x48 | 傳統瀏覽器與舊系統 fallback | 放在根目錄仍是保守做法 |
| favicon.svg | 向量格式，不固定像素尺寸 | 現代瀏覽器 favicon | 適合簡潔符號，不適合含複雜效果的圖案 |
| PNG favicon | 32x32、48x48、96x96 | 瀏覽器、搜尋結果與部分平台備用 | 輸出透明背景時要測試深色與淺色介面 |
| apple-touch-icon.png | 180x180 | iPhone、iPad 加入主畫面 | 建議使用不透明背景，避免系統裁切後失真 |
| manifest icon | 192x192、512x512 | PWA、Android 主畫面、安裝提示 | 常放在 site.webmanifest 內管理 |
Apple Touch Icon
Apple Touch Icon 是 iOS 使用者把網站加入主畫面時看到的圖示。它和瀏覽器分頁 favicon 不同，顯示空間較大，也可能被系統套用圓角，因此不要直接拿 16x16 favicon 放大使用。
建議準備 180x180 PNG，圖形要保留足夠安全邊界，避免重要符號貼齊四邊。若品牌符號本身很細，最好另做一版簡化圖形。
PWA manifest icon
Web App Manifest 用來描述網站被安裝到裝置後的名稱、顏色與 icon。若網站有 PWA、加入主畫面、類 App 使用情境，manifest icon 就不只是加分項，而是使用者會實際看到的品牌入口。
常見做法是準備 192x192 與 512x512 PNG，並在 manifest 中指定 src、sizes、type 與 purpose。purpose 若包含 maskable，要另外測試安全區域，避免圖形被系統遮切。
Favicon 設計原則：小尺寸也要看得清楚
好的 favicon 不是把 logo 縮小，而是在極小尺寸裡保留最有辨識度的品牌線索。小尺寸看不清楚，再高解析的原始檔也救不了使用者第一眼的辨識。
簡化輪廓
favicon 的第一優先是輪廓辨識。若品牌 logo 有字標、細線、漸層或複雜插畫，通常要抽出單一符號、首字母或幾何特徵。Pixelcake 這類偏視覺品牌的網站，也應該讓 favicon 回到可被記住的形狀，而不是硬塞完整品牌圖。
高對比
favicon 會出現在不同瀏覽器主題、深色模式、淺色模式與搜尋結果背景裡。顏色太接近、透明區域太多、細線太淡，都會讓圖示在分頁列變成一塊模糊色點。
較穩的做法是使用明確的前景與背景，或至少確保主要符號在白底、深灰底、瀏覽器標籤底色上都能看見。
避免小字與細節
16x16 或 32x32 空間不適合放完整中文、英文長字、標語或多層陰影。即使在設計稿中看起來精緻，上線後也可能只剩模糊線條。我的判斷是，favicon 應該先犧牲細節，保留識別；細節可以留給 logo、品牌手冊或網站主視覺。
深色 / 淺色背景測試
至少要把 favicon 放在白色、深灰色、瀏覽器分頁底色與手機主畫面預覽中檢查。若品牌色本身偏淡，可能需要增加外框、底色或調整明度。這不是美感偏好，而是可讀性問題。
16px、32px、48px 檢查
- 16x16：只能看主要輪廓，不應依賴文字或細節。
- 32x32：應能辨識品牌符號或首字母。
- 48x48：應可作為搜尋結果與較高密度螢幕的基本版本。
- 180x180：應檢查 iOS 主畫面裁切與圓角後是否仍穩定。
- 512x512：應檢查 PWA 或安裝圖示是否有足夠安全邊界。
如何製作 favicon.ico、SVG 和 PNG 網站 icon
製作 favicon 時，先從品牌符號或 logo 的簡化版開始，再分別輸出 ICO、SVG、PNG。不要只輸出一種格式，因為不同瀏覽器、CMS 與裝置讀取的 favicon stack 並不完全相同。
從 logo 或符號開始
第一步不是轉檔，而是判斷 logo 是否適合縮小。若 logo 是完整字標，請先抽出首字母、品牌符號、幾何切角或代表性色塊。若 logo 已經是簡單圖形，也要檢查縮到 16x16 後是否仍能看出輪廓。
如果品牌有完整規範，可參考 品牌識別設計指南 與 品牌手冊 的邏輯，把 favicon 視為品牌資產的一部分，而不是臨時轉出的小圖。
輸出 ICO / SVG / PNG
ICO 適合保留傳統相容性，SVG 適合現代瀏覽器與向量縮放，PNG 則適合 Apple Touch Icon、manifest icon 與部分平台上傳需求。輸出時建議保留透明背景版本與有底色版本，並實際測試瀏覽器與手機畫面。
| 輸出格式 | 適合情境 | 注意事項 |
|---|---|---|
| ICO | 傳統 favicon fallback | 可包含多個尺寸，檔名常用 favicon.ico |
| SVG | 現代瀏覽器與向量圖形 | 圖形要簡潔，避免外部字型或複雜濾鏡 |
| PNG | Apple Touch Icon、manifest、CMS 上傳 | 不同尺寸分開輸出，避免由平台粗糙縮放 |
檔名與資料夾建議
常見檔名包括 favicon.ico、favicon.svg、apple-touch-icon.png、icon-192.png、icon-512.png 與 site.webmanifest。favicon.ico 放在網站根目錄是保守做法，其他檔案可放在根目錄或 assets/icons 之類的固定資料夾，但 HTML 與 manifest 內的路徑要完全對應。
一旦上線，就不要隨意改 favicon 路徑。Google 搜尋結果與瀏覽器快取都依賴穩定網址，頻繁更換檔名會增加排查成本。
上線前檢查
- 檔案是否能直接用瀏覽器開啟，沒有 404。
- HTML head 是否已加入正確 link rel。
- favicon.ico 是否位於預期路徑。
- SVG 是否不依賴外部字型或外部圖片。
- Apple Touch Icon 是否為 180x180 PNG。
- manifest icon 是否包含 192x192 與 512x512。
如何把網站 icon 放到網站上：HTML、WordPress、Shopify、Wix
網站 icon 設定要看網站架構。客製網站通常在 HTML head 加入 favicon link；WordPress、Shopify、Wix、Squarespace 則多半在後台上傳網站圖示，但仍要確認前台是否真的輸出正確檔案。
HTML head 設定
客製網站最基本的做法，是把 favicon 檔案放到固定路徑，並在每個頁面的 HTML head 中加入 icon 相關標籤。範例如下：
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">這組寫法同時處理傳統 ICO、現代 SVG、iOS 主畫面與 PWA manifest。若網站使用前端框架或靜態網站產生器，要確認這些標籤最後有出現在實際輸出的 HTML，而不是只存在開發環境設定檔裡。
WordPress 網站圖示
WordPress 通常可以從後台的外觀、自訂或網站識別區塊設定網站圖示。不同佈景主題與區塊編輯器版本的路徑可能略有差異，但概念相同：上傳正方形圖檔，儲存後檢查前台 head 是否輸出 favicon 相關標籤。
如果 WordPress 已經透過佈景主題輸出 favicon，就不要再用外掛重複插入多組 link rel，否則瀏覽器可能讀到舊檔或順序錯誤的設定。遇到快取外掛、CDN 或佈景主題快取時，更新後要一起清除。
Shopify / Wix / Squarespace
Shopify、Wix、Squarespace 這類平台通常在品牌、網站設定、外觀或瀏覽器圖示相關區塊提供上傳欄位。非工程使用者優先使用平台內建設定，不必直接改模板碼。
| 平台 | 設定方向 | 檢查重點 |
|---|---|---|
| Shopify | 佈景主題自訂或品牌相關設定 | 確認前台分頁 icon 與佈景主題輸出一致 |
| Wix | 網站設定中的 favicon 或品牌圖示 | 發布後再檢查正式網址，不只看編輯器預覽 |
| Squarespace | 設計或瀏覽器圖示相關設定 | 確認桌機與行動裝置預覽都已更新 |
客製網站與 PWA manifest
如果網站支援 PWA，manifest 需要明確列出 icon 檔案。常見欄位包含 src、sizes、type 與 purpose。範例可寫成：
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}manifest 寫好後，要檢查 /site.webmanifest 是否能正常開啟，Content-Type 是否正確，HTML 是否有連到它。若 icon 檔案在 CDN 上，也要確認網址能公開存取。
免費網站 icon 素材平台怎麼選
免費網站 icon 素材不能只看數量，應該看格式、授權、風格一致性與可維護性。真正會影響網站品質的，通常是整組 icon 是否同一語言，而不是你下載了幾百個圖案。
PNG、SVG、ICO 差異
網站介面 icon 建議優先找 SVG，因為可縮放、可改色，也更容易維持清晰度。PNG 適合固定尺寸或不需要改色的情境。ICO 主要用在 favicon，不適合作為一般介面 icon 系統的主格式。
商用授權與標註來源
免費 icon 不等於可以任意商用。下載前要看授權是否允許商業網站使用、是否需要標註來源、是否允許修改顏色與線條、是否能放進客戶專案。這一點比素材看起來漂不漂亮更重要，因為授權問題通常在網站上線後才會變成風險。
風格、線條、圓角、色彩一致性
選 icon 時要看線條粗細、圓角大小、填色方式、視覺重量與負空間。不要在同一頁混用 Material Symbols、手繪線條、3D 圖示和實心圖案，除非品牌本來就有清楚的混搭規範。
若網站已有 品牌形象一致性 或 品牌色彩 規則，介面 icon 應該跟著品牌規範走，而不是每個區塊各自找一組好看的素材。
平台比較表
| 平台 | 適合用途 | 格式特性 | 授權檢查重點 |
|---|---|---|---|
| Flaticon | 大量網站介面與分類 icon | 常見 SVG、PNG | 免費方案是否需標註來源，商用限制需逐項確認 |
| Icons8 | 需要一致風格與多套視覺系統 | 多格式與多風格 | 免費使用條件、標註規範與下載限制 |
| Freepik | 搭配插畫、向量素材與視覺素材包 | SVG、PNG、向量檔依素材而定 | 素材作者、授權方案與是否可修改 |
| Font Awesome | 網站介面、功能按鈕、後台系統 | SVG、Icon font | 免費與 Pro 圖示範圍不同 |
| Material Symbols | 工具型網站、SaaS、Google 風格介面 | 字型與 SVG 用法 | 確認授權條款與品牌風格是否匹配 |
Favicon 沒顯示或沒更新怎麼辦？
Favicon 沒顯示時，先查快取、路徑、HTML link、檔案格式與 CMS 儲存狀態。若只有 Google 搜尋結果沒更新，網站端修正後仍需要等待 Google 重新擷取，不能用瀏覽器分頁結果直接判斷。
瀏覽器快取
favicon 是很容易被瀏覽器快取的資產。你可能已經換了新檔案，但瀏覽器仍顯示舊圖。先用無痕視窗、不同瀏覽器、清除網站資料或改用新檔名測試。若有 CDN，也要清除 CDN 快取。
檔案路徑錯誤
最常見錯誤是 HTML 指向 /favicon.ico，但檔案其實放在 /assets/favicon.ico，或正式站與測試站路徑不同。把 href 裡的網址直接貼到瀏覽器，如果開啟後是 404、權限錯誤或舊圖，就先修路徑。
HTML link 錯誤
link rel 寫錯、type 寫錯、模板沒有輸出到正式頁、不同外掛插入多組 favicon，都會造成讀取混亂。檢查實際頁面的原始碼，不要只看 CMS 後台或開發檔案。
CMS 沒儲存
WordPress、Shopify、Wix 這類平台常見問題是後台看起來上傳成功，但正式站尚未發布、佈景主題快取未更新，或預覽站與正式網域不同。請在正式網址檢查，並確認設定已發布。
Google 搜尋結果延遲
如果瀏覽器分頁已正確顯示，但 Google 搜尋結果仍是舊圖，通常不是 favicon 檔案馬上失敗。先確認檔案可被存取、不是 robots.txt 阻擋、不是登入後才看得到，並保持網址穩定。接著等待 Google 重新擷取與更新。
| 問題現象 | 優先檢查 | 處理方式 |
|---|---|---|
| 分頁完全沒有 favicon | HTML link 與檔案路徑 | 開啟 href 目標，確認檔案不是 404 |
| 分頁還是舊圖 | 瀏覽器快取與 CDN 快取 | 清快取、換瀏覽器、必要時改檔名 |
| WordPress 後台已換，前台沒變 | 佈景主題、快取外掛、發布狀態 | 清除快取並檢查前台原始碼 |
| Google 搜尋結果沒顯示 | 正方形尺寸、可檢索、穩定網址 | 修正規格後等待 Google 更新 |
| 手機加入主畫面圖示模糊 | Apple Touch Icon 或 manifest icon | 補 180x180、192x192、512x512 圖檔 |
如何取得別人網站或自己網站的 favicon
要取得 favicon，可以查看頁面原始碼中的 link rel icon，也可以使用 favicon 擷取工具。這適合做競品研究與品牌資產盤點，不代表可以拿別人的品牌圖示直接使用。
查看原始碼
在瀏覽器開啟網站後，查看頁面原始碼或開發者工具，搜尋 rel="icon"、apple-touch-icon、manifest 等字樣。找到 href 後，把相對路徑補成完整網址，就能確認網站實際使用哪些 favicon 檔案。
輸入網址擷取 favicon
部分工具可以輸入網域後自動抓取 favicon，例如 favicon 擷取服務或品牌資產檢查工具。這類工具適合快速盤點，但結果仍要回到原始碼確認，因為有些網站會針對不同裝置輸出不同圖示。
用於競品研究與品牌盤點
擷取 favicon 的合理用途，是觀察競品如何簡化品牌符號、使用哪些尺寸、是否有 Apple Touch Icon 與 manifest icon。不要把別人的 favicon 當成可下載素材，也不要改色後放到自己的網站使用，商標與品牌識別不屬於免費 icon 素材。
進階用途：用網站 icon 做品牌與網站資產盤點
網站 icon 可以用來檢查品牌資產是否一致。把 favicon、主畫面 icon、PWA icon 與介面 icon 一起盤點，能找出品牌改版後最容易遺漏的舊檔案與不一致視覺。
整理全站 icon 尺寸
先列出目前網站使用的 favicon.ico、favicon.svg、apple-touch-icon.png、manifest icon、頁面內 SVG icon、社群頭像與後台上傳圖示。每一項都標記尺寸、用途、檔案位置與是否仍在使用。
命名規則
命名建議讓用途一眼可讀，例如 favicon.ico、favicon.svg、apple-touch-icon.png、icon-192.png、icon-512.png。網站介面 icon 則可依功能命名，例如 icon-search.svg、icon-cart.svg、icon-service-design.svg。命名穩定後，後續維護與除錯會快很多。
品牌手冊與 icon 使用規則
品牌手冊不一定要寫成大型 design system，但至少要定義 favicon 使用版本、最小尺寸、背景限制、主要色與禁用情境。若網站使用 8pt spacing 或既有介面規則，也可以參考 8pt grid spacing，讓 icon 與文字、按鈕、卡片間距保持一致。
何時需要重畫
- favicon 縮小後只剩一團色塊。
- 舊版 logo 還出現在搜尋結果或手機主畫面。
- 網站內 icon 來自多個素材包，線條與圓角明顯不一致。
- 品牌改版後沒有同步更新 manifest、Apple Touch Icon 或 CMS 圖示。
- 免費素材授權不清楚，無法確認是否可商用。
網站 icon 常見問題 FAQ
網站 icon 的常見問題多半集中在尺寸、格式、Google 顯示、CMS 設定、授權與更新時間。先把 favicon 與網站介面 icon 分開處理，答案會清楚很多。
網頁 icon 尺寸要多大？
favicon 建議至少準備 16x16、32x32、48x48 的基本版本，若要支援 Apple Touch Icon，準備 180x180 PNG；若有 PWA 或加入主畫面需求，準備 192x192 與 512x512 PNG。以 Google 搜尋結果為目標時，使用正方形並以 48x48 或 48 的倍數較穩。
favicon.ico 一定要用 ICO 格式嗎？
不一定。現代網站可以同時使用 SVG、PNG 與 ICO。ICO 的價值在於傳統相容性，所以仍建議保留 favicon.ico 作為 fallback，但不應只靠 ICO 處理所有裝置與平台。
SVG 可以當 favicon 嗎？
可以，許多現代瀏覽器支援 SVG favicon。SVG 適合簡潔、可縮放的品牌符號，但要避免依賴外部字型、外部圖片或過度複雜的效果。實務上建議同時提供 favicon.ico 作為備用。
Google 搜尋結果的網站小圖示為什麼沒有出現？
常見原因包括 favicon 尺寸不合適、不是正方形、檔案網址不穩定、Googlebot 無法存取、HTML 沒有正確標示，或 Google 尚未重新擷取。先確認檔案能公開開啟，再等待搜尋結果更新。
WordPress 怎麼更換網站 icon？
通常可到 WordPress 後台的外觀、自訂或網站識別區塊上傳網站圖示。儲存後請檢查正式站分頁是否更新，並清除快取外掛、佈景主題快取與 CDN 快取，避免前台仍顯示舊 favicon。
Apple Touch Icon 是什麼？一定要做嗎？
Apple Touch Icon 是 iPhone 或 iPad 使用者把網站加入主畫面時看到的圖示。若你的網站重視行動裝置使用體驗，建議準備 180x180 PNG。它不一定影響桌機分頁 favicon，但會影響主畫面品牌呈現。
免費 icon 可以直接商用嗎？
不一定。免費 icon 仍可能要求標註來源、限制商業使用、禁止修改，或只允許個人用途。下載前要閱讀授權條款，尤其是客戶網站、電商網站、SaaS 產品與廣告素材，不能只看「free」就直接使用。
網站 icon 可以直接用 logo 嗎？
可以，但前提是縮小後仍清楚。完整字標、複雜插畫或細線 logo 通常不適合直接當 favicon。較好的做法是從 logo 中抽出符號、首字母或簡化輪廓，另外做一版小尺寸專用 favicon。
Favicon 更新後多久會生效？
瀏覽器端可能因快取而延遲顯示，可透過清除快取、無痕視窗或換瀏覽器檢查。Google 搜尋結果則需要等待重新擷取與更新，時間不固定。網站端要先確保路徑、格式與可存取狀態正確。
可以使用 animated icon 嗎？
不建議把 animated icon 當成主要 favicon 策略。不同瀏覽器支援狀況不同，動態效果也可能干擾辨識與使用體驗。若只是品牌活動頁或特殊互動，可以另外測試，但正式品牌 favicon 應以穩定清楚為主。
要怎麼抓出某個網站的 favicon？
可以查看網站原始碼，搜尋 rel="icon"、apple-touch-icon 或 manifest，找到對應檔案路徑後開啟確認。也可以使用 favicon 擷取工具輸入網址查詢。這適合研究與盤點，不代表可以直接使用他人的品牌圖示。