Favicon 與觸控圖示(網站圖示)
別稱 網站圖示 · apple-touch-icon · 捷徑圖示
透過 <link rel="icon"> 與 <link rel="apple-touch-icon"> 宣告的小型網站圖示,會出現在瀏覽器分頁、書籤、行動裝置主畫面與搜尋結果中。
這是什麼
Favicon 是顯示在瀏覽器分頁與書籤中的小型品牌圖示,透過 <link rel="icon"> 標籤(或放在根目錄的 favicon.ico)宣告。apple-touch-icon 則是較大的方形圖示,iOS 與 Android 在使用者把網站加入主畫面時會使用。
為什麼重要
只要你的網址出現的地方,Favicon 都能強化品牌辨識度,包括會在列表旁顯示網站圖示的 Google 行動搜尋結果。清晰、一致的圖示能強化 AI 引擎與你網域連結的品牌與實體訊號,提升信任與記憶度。
如何檢查
檢視原始碼,確認 <head> 中有 <link rel="icon"> 與 <link rel="apple-touch-icon">,並確認圖示檔案載入時沒有 404。觀察瀏覽器分頁,並使用 Search Console 或 SERP 預覽,確認 Google 已抓取到 favicon。
如何修正
提供至少 48x48 像素(最好是 48 的倍數)的方形 favicon,以 <link rel="icon"> 引用,再加上 180x180 的 apple-touch-icon,並在網站根目錄保留一個備援的 favicon.ico。使用相同的圖片來源與穩定的網址,讓搜尋引擎能可靠地抓取並顯示它。
相關詞彙
- Open Graph 與 Twitter Card 標籤Open Graph 與 Twitter Card meta 標籤告訴社群平台與通訊軟體如何呈現連結預覽,包括標題、描述與圖片。
- Viewport meta 標籤(視窗 meta 標籤)<meta name="viewport"> 標籤告訴行動瀏覽器要讓版面寬度配合裝置螢幕,藉此達成響應式、適合行動裝置的呈現。
- Organization / WebSite Schema(組織/網站結構化資料)用 schema.org 的 Organization(名稱、網址、標誌、社群檔案)與 WebSite(網站名稱、搜尋動作)宣告網站背後實體的結構化資料,向搜尋引擎與答案引擎確立「你是誰」。
- Title 標籤(標題標籤)Title 標籤是放在頁面 <head> 中的 <title> 元素,用來定義頁面的正式名稱,會顯示為搜尋結果中可點擊的標題,以及瀏覽器分頁的名稱。
官方參考資料
- MDN: The External Resource Link element <link>
- Google Search Central: Define a favicon to show in search results
外部連結,將於新分頁開啟。
把知識化為行動。
親手逐項完成每一項檢查,並轉成可分享的 GEO Score 報告——或在數秒內自動掃描你的網站。