HTML 網站圖示 favicon：格式、尺寸與寫法
網站圖示是顯示在瀏覽器標籤中 頁面標題 旁邊的小圖像。一般會將圖示影像儲存在網站的根目錄中，當然也可以集中存放在 images 的目錄中。書籤與搜尋結果旁同樣看得到它，現在的建議是主檔用 SVG，再搭配 apple-touch-icon。
favicon 的格式不一定要是 .icon，它也可以 .png、.jpg、.gif。
html
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">現在的建議寫法
現代瀏覽器都支援 SVG 圖示，向量格式在任何尺寸下都清晰，檔案也小。建議以 SVG 為主、.ico 為備援：
html
<head>
<!-- 主要圖示：向量格式，任何尺寸都清晰 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- 備援：放在根目錄，舊瀏覽器會自動抓 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- 加入主畫面時使用 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>| 檔案 | 尺寸 | 用途 |
|---|---|---|
favicon.svg | 向量 | 瀏覽器頁籤的主要圖示 |
favicon.ico | 16、32、48 | 舊瀏覽器與根目錄自動抓取的備援 |
apple-touch-icon.png | 180×180 | iOS 加入主畫面時的圖示 |
小提醒
圖示在頁籤上只有 16 到 32 像素，細節會全部糊掉。請把 Logo 簡化成單一圖形或一個字母，別直接把完整的橫式 Logo 縮小。
搜尋結果的網址旁也會顯示這個圖示，但那裡要求至少 48×48 且邊長為 48 的倍數，只準備 16×16 的話頁籤正常、搜尋結果卻沒有圖示。要求與排查步驟見 favicon 與 SEO。
換了圖示卻沒有更新
瀏覽器對 favicon 的快取相當頑固，改檔案後常常看不到變化。可以試試：
- 強制重新整理（
Ctrl+F5）。 - 清除該網站的瀏覽資料。
- 在路徑後面加上版本參數，讓瀏覽器視為新檔案。
html
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">線上產生工具
常見問題
favicon 一定要用 ico 格式嗎？
不一定。現代瀏覽器都支援 PNG 與 SVG，SVG 還能隨深淺色主題切換。保留一份放在根目錄的 .ico 當作備援即可，兩者可以同時存在。
favicon 要準備哪些尺寸？
頁籤上大約以 16 或 32 像素顯示，.ico 可以同時包含 16、32、48 三種尺寸。行動裝置加到主畫面時另外需要 180 像素的 apple-touch-icon。
換了 favicon 卻沒有變，怎麼辦？
瀏覽器對圖示的快取相當頑固。可以強制重新整理、清除網站資料，或在網址後面加上版本參數讓它視為新檔案。
favicon 影響 SEO 嗎？
不影響排名，但 Google 的行動版搜尋結果會顯示網站圖示，有設定的網站在結果頁中辨識度較高，也顯得比較完整。
