favicon 與 SEO：Google 搜尋結果的網站圖示規則
favicon 現在不只出現在瀏覽器頁籤，也出現在 搜尋結果的網址旁邊（行動裝置上特別明顯）。它不影響排名，但影響使用者在一長串結果裡認不認得出您。
完整的宣告
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" sizes="any" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">三行各有分工：
| 宣告 | 負責 |
|---|---|
type="image/svg+xml" | 支援 SVG 的瀏覽器優先吃這個，任何尺寸都清晰 |
sizes="any" | 退路，指向內含多種尺寸的 ICO |
apple-touch-icon | iOS 加到主畫面時的圖示 |
順序有意義
瀏覽器會挑它支援的第一個。SVG 放前面，支援的環境就用向量版；不支援的自動落到 ICO。反過來寫的話，即使支援 SVG 也可能先吃到 ICO。
搜尋引擎的要求
| 項目 | 要求 |
|---|---|
| 最小尺寸 | 48 × 48 像素 |
| 邊長 | 必須是 48 的倍數（48、96、144、192…） |
| 比例 | 正方形 |
| 格式 | 任何搜尋引擎支援的圖片格式 |
| 位置 | 必須可被爬取，不能被 robots.txt 擋住 |
| 穩定性 | 網址應保持固定，換路徑會需要重新抓取 |
16 × 16 不夠
瀏覽器頁籤只需要 16 像素，但搜尋結果需要至少 48。只準備 16 × 16 的 ICO 是最常見的原因，頁籤看起來正常，搜尋結果卻沒有圖示。
要準備幾個檔案
實務上這一組就夠：
| 檔案 | 尺寸 | 用途 |
|---|---|---|
favicon.svg | 向量 | 現代瀏覽器，任何尺寸都清晰 |
favicon.ico | 內含 16、32、48 | 退路，也是搜尋引擎抓取的來源 |
apple-touch-icon.png | 180 × 180 | iOS 主畫面 |
用腳本從 SVG 產生其他格式
主檔維護一份 SVG，其餘用建置腳本轉出，就不會出現「改了標誌卻忘了更新 ICO」的情況：
# 從 favicon.svg 產出 PNG、ICO 與 apple-touch-icon
npm run logo:assetsICO 的內容來源是 16、32、48 三張 PNG，這些中間檔會留在 public 目錄裡，它們不會被任何 .md 引用，清理檔案時要留意不要誤刪。
favicon 該長什麼樣
不要直接縮小網站標誌
網站標誌通常是橫向、帶文字的。縮到 16 像素會變成一團看不清的色塊。
favicon 需要一個 獨立設計的扁平化方形版本：
- 只保留最有辨識度的那個圖形元素
- 加寬留白，因為小尺寸下細節會糊掉
- 用實心底色而非漸層或陰影
- 主視覺與品牌一致，但不是同一份檔案
深色模式也值得考慮，SVG favicon 可以內嵌媒體查詢，在深色主題下換色：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.bg { fill: #0065a9; }
@media (prefers-color-scheme: dark) {
.bg { fill: #2b93da; }
}
</style>
<rect class="bg" width="32" height="32" rx="6" />
</svg>排查圖示不顯示
按這個順序確認：
| # | 檢查 | 怎麼確認 |
|---|---|---|
| 1 | 檔案本身打得開 | 直接在瀏覽器輸入 您的網域/favicon.ico |
| 2 | 沒被 robots.txt 擋住 | 確認沒有 Disallow: /favicon.ico 或擋住整個圖片目錄 |
| 3 | 尺寸至少 48 × 48 | 用圖片檢視工具確認 ICO 內含的尺寸 |
| 4 | 首頁有宣告 | 搜尋引擎主要從 首頁 找圖示宣告 |
| 5 | 等重新抓取 | 通常數天到數週，無法強制 |
首頁的宣告最重要
搜尋引擎會從網站的首頁尋找圖示宣告。內頁都寫了但首頁漏了，圖示就可能抓不到。用框架開發時要確認 <head> 的宣告是全站共用的，不是逐頁設定。
其他相關的圖示宣告
超出 SEO 範圍但常一起處理的：
<!-- Android 主畫面與 PWA -->
<link rel="manifest" href="/manifest.json">
<!-- 頁籤主題色（部分瀏覽器的網址列會跟著變色） -->
<meta name="theme-color" content="#0065a9">theme-color 也支援依主題切換：
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1f">檢查清單
| 項目 | 標準 |
|---|---|
有 favicon.ico 且內含 48 × 48 | 必備 |
首頁的 <head> 有圖示宣告 | 必備 |
圖示檔案未被 robots.txt 擋住 | 必備 |
| 圖示是正方形 | 必備 |
| 有 SVG 版本供現代瀏覽器 | 建議 |
有 180 × 180 的 apple-touch-icon | 建議 |
| 圖示網址保持穩定 | 建議 |
常見問題
favicon 會影響排名嗎？
不會。它影響的是搜尋結果的視覺辨識度：使用者掃視結果列表時，有圖示的項目比較容易被認出是熟悉的品牌。這屬於點擊率的層面，不是排名訊號。
搜尋結果的圖示為什麼沒出現？
常見原因有四個：圖示檔案被 robots.txt 擋住、尺寸太小、宣告的路徑抓不到，或是剛設定完還沒被重新抓取。前三者要修，最後一者只能等，通常需要數天到數週。
尺寸要準備幾種？
搜尋引擎要求圖示至少 48 × 48 像素，而且邊長必須是 48 的倍數。實務上準備一份 SVG 供支援的瀏覽器使用、一份內含 16、32、48 三種尺寸的 ICO 當退路，再加一張 180 × 180 的行動裝置圖示就足夠。
SVG favicon 可以完全取代 ICO 嗎？
還不行。多數現代瀏覽器支援 SVG 圖示，但仍有環境只認 ICO，搜尋引擎的抓取也偏好點陣格式。正確做法是兩份都提供，讓支援 SVG 的優先吃 SVG，其餘退回 ICO。
圖示要不要跟網站標誌一樣？
主視覺要一致，但不該直接縮小。網站標誌通常橫向且帶文字，縮到 16 像素會變成一團看不清的色塊。應該另外做一個扁平化的方形版本，只保留最有辨識度的圖形元素。
