什麼是 Favicon?為什麼它對你的網站很重要?

Favicon(「favorite icon」的縮寫,意為「我的最愛圖示」)是一張小型的正方形圖片,用來代表網站,會顯示在瀏覽器分頁、書籤、瀏覽紀錄、Google 搜尋結果、手機主畫面以及已安裝的網頁應用程式上。它之所以重要,是因為它讓你的網站一眼就能被辨認,在開了許多分頁時更容易被找到,傳達出網站專業可信的形象,而且現在 Google 搜尋結果也會在網站名稱旁顯示它。如果沒有 favicon,訪客只會看到通用的地球或空白頁面圖示,伺服器的紀錄檔也會被大量 404 錯誤塞滿。你可以使用 MakeFav favicon 產生器,免費建立一整組完整的 favicon。

什麼是 favicon?

Favicon 是一個極小的品牌圖像,通常是標誌的簡化版本,或是單一字母或符號,瀏覽器和其他軟體會從你的網站擷取它,並在需要精簡視覺識別的地方顯示。在桌面瀏覽器上,它通常以 16 x 16 CSS 像素繪製,不過檔案本身應該更大,這樣在高像素密度的螢幕上才能保持清晰。

從技術上來說,favicon 就是一個由 HTML 引用(或位於預設位置)的圖片檔案,使用者代理程式會與頁面內容分開下載它。如今,「favicon」很少只是單一檔案。現代網站通常會提供同一個圖示的多個版本,讓瀏覽器、搜尋引擎、iOS 和 Android 都能取得適合自己的格式與尺寸。

Favicon 簡史

Favicon 的起源可追溯到 1999 年 3 月,當時微軟發布了 Internet Explorer 5。這款瀏覽器讓使用者可以把頁面儲存到「我的最愛」清單,同時也會在網站根目錄尋找名為 favicon.ico 的小圖示檔案,顯示在每個已儲存項目旁邊。概念很簡單:只要網站提供了 /favicon.ico,圖示就會出現在書籤旁。

其他瀏覽器很快也採用了這項功能,而分頁式瀏覽讓它變得更加實用。隨著分頁成為人們瀏覽網頁的主要方式,favicon 也從書籤的裝飾轉變為核心的導覽輔助。多年來,相關做法不斷演進:

• 2000 年代初期:<link rel="icon"> 元素讓網站可以指向任意網址上的圖示,而不再侷限於根目錄,非 IE 瀏覽器也開始接受 PNG 和 GIF 檔案。
• 2010 年代:Apple 為 iOS 主畫面推出了 apple-touch-icon,Android 和 Windows 也加入各自的規範,例如 manifest 圖示和磚塊圖片。
• 現今:SVG favicon、網頁應用程式 manifest、支援深色模式的圖示,以及 Google 對搜尋結果 favicon 的要求,讓 favicon 成為網站技術設定中雖小卻確實重要的一環。

Favicon 現在會出現在哪些地方

你的 favicon 出現的地方,遠不只瀏覽器分頁。主要有以下幾處:

• 瀏覽器分頁:最顯眼的位置,當開啟許多分頁時,圖示往往是你唯一看得到的東西。
• 書籤與我的最愛:圖示會顯示在書籤列和選單中頁面標題的旁邊。
• 瀏覽紀錄與常用網站:瀏覽器會在歷史紀錄清單和新分頁頁面中顯示 favicon。
• Google 搜尋結果:無論行動版或桌面版,Google 都會在網站名稱和網址旁顯示該網站的 favicon。
• 主畫面:當訪客在 iOS 或 Android 上將你的網站加入主畫面時,觸控圖示或 manifest 圖示就會成為類似應用程式的捷徑圖示。
• 已安裝的 PWA:漸進式網頁應用程式(PWA)會使用其網頁應用程式 manifest 中的圖示,作為啟動圖示、啟動畫面和工作切換器上的圖示。
• Windows 磚塊與釘選網站:較舊的 Windows 和 Edge 版本會使用為釘選網站定義的磚塊圖片;新版本大多直接沿用你的標準圖示。
• 部分應用程式中的連結預覽:某些聊天和生產力工具(Slack 就是著名的例子)會在展開的連結旁顯示網站的 favicon。多數預覽主要依賴 Open Graph 圖片,但 favicon 常常會提供那個小小的品牌標誌。

為什麼 favicon 對你的網站很重要

品牌辨識度

人們辨識顏色和形狀的速度比閱讀文字更快。一致的圖示在分頁、書籤和搜尋結果中反覆出現,每次被看到都會加深熟悉感,等於每次造訪都能獲得免費的品牌曝光。

信任感與可信度

缺少 favicon 會讓網站看起來像是尚未完成。一個乾淨、顯示正確的圖示,是在傳達有人用心處理細節的小小訊號,有助於讓人覺得這個網站是正當可靠的。它並不是安全功能,釣魚網站也可以複製圖示,但空白的預設圖示很難幫助企業建立穩固的形象。

搜尋結果的點擊率

由於 Google 會在你的搜尋結果旁顯示 favicon,它成為你的結果與競爭對手相比時外觀的一部分。Google 並未公布 favicon 對排名有影響,你也不應期待排名因此提升。它的好處在於視覺辨識:認得你圖示的使用者更有可能注意到並選擇你的結果,尤其是在搜尋結果排版緊湊的行動裝置上。

多分頁時的易用性

當瀏覽器開著二十個分頁時,標題會被截斷到什麼都看不到,只剩下 favicon。一個獨特的圖示能讓人立刻找到你的分頁並切換回去,而不是重複開啟,或是乾脆忘了它。

專業的印象

設計精良的 favicon 展現出與網站其他部分一致的細心程度。無論是產品頁面、說明文件、部落格還是網頁應用程式,它都是你能加入的最划算的質感提升項目之一。

尋找分頁的無障礙性

圖示能幫助習慣以視覺掃描而非閱讀文字的使用者,包括有閱讀障礙或認知差異的人,以及任何需要在不同任務間快速切換的人。高對比、形狀簡單的圖示更容易被辨認出來。不過請記住,favicon 只是輔助:它無法取代清楚的頁面標題,因為螢幕閱讀器和輔助技術都依賴頁面標題。

沒有 favicon 會發生什麼事

即使你的 HTML 沒有提到 favicon,瀏覽器也會自動向你網域的根目錄請求 /favicon.ico。如果該檔案不存在,就會發生以下幾件事:

• 通用圖示:訪客會在分頁和書籤中看到預設的地球、文件或空白圖示,看起來很沒有個性。
• 紀錄檔中的 404 錯誤:每個請求該檔案的瀏覽器都會產生一次失敗的請求。在流量大的網站上,這會讓存取紀錄、錯誤監控和分析數據充滿雜訊,並可能掩蓋真正的問題。
• Google 結果中沒有圖示:如果沒有有效且可供爬取的 favicon,Google 會在你的搜尋結果旁顯示預設的佔位圖示。
• 浪費的請求:瀏覽器可能會重試,對你的伺服器增加雖小卻毫無意義的負載。

即使是非常簡單的圖示也比沒有好,因為它能消除 404 錯誤,並給使用者一個容易辨認的標記。

Favicon 格式說明

沒有任何單一格式能涵蓋所有平台,因此大多數網站會使用一小組檔案。

舊版 Windows 磚塊圖片(透過 browserconfig.xml 設定)是為 Internet Explorer 11 和舊版 Edge 所需要的。除非你必須支援這些環境,否則現在很少需要了。

Google 對搜尋結果 favicon 的規範

如果你希望圖示出現在 Google 搜尋中,請遵循 Google 公布的要求:

• 尺寸:圖片必須是正方形(1:1),且為 48 像素的倍數,例如 48x48、96x96 或 144x144。Google 之後會將它縮小為 16x16 來顯示。支援的最小尺寸是 8x8,但建議使用 48x48 或更大。
• 格式:瀏覽器支援的任何格式都可以,包括 ICO、PNG 和 SVG。
• 穩定的網址:請勿經常更改 favicon 的網址。穩定的位址有助於 Google 讓你的圖示保持最新。
• 可供爬取:favicon 檔案和你的首頁都必須能讓 Googlebot 存取。請不要在 robots.txt 中封鎖它們,也不要放在需要登入的頁面之後。
• 每個網站只需一個宣告:圖示與網站首頁綁定,因此請將 <link> 標籤放在首頁的 head 中。
• 具代表性且合適:圖示應反映你的品牌,Google 可能會把冒犯性或具誤導性的圖示替換成預設圖示。

在你發布或更改 favicon 之後,Google 可能需要數天到數週才會重新爬取並更新,所以請不要期待立刻看到變化。

如何用 MakeFav 快速建立 favicon

你不需要設計軟體,也不需要使用命令列。MakeFav 產生器能將一張來源圖片轉換成上述所有檔案。

1. 準備你的圖稿。使用 512 x 512 px 或更大的正方形標誌或符號。簡單的形狀效果最好,因為圖示最終會以 16 px 呈現。
2. 上傳圖片到 MakeFav 首頁,或開啟編輯器,在匯出前調整圖片、背景和邊距。
3. 預覽小尺寸下的結果,並在淺色與深色背景上查看,確認它依然清晰易辨。
4. 下載檔案包。其中包含 ICO、各種尺寸的 PNG、Apple 觸控圖示、manifest 圖示,以及可直接貼上的 HTML 程式碼片段。
5. 上傳檔案到網站根目錄,讓它們可以透過 /favicon.ico 這類路徑存取。
6. 加入 HTML到每個頁面的 <head> 中,或加到你共用的版面配置或範本裡。
7. 驗證:使用 favicon 檢查工具,然後清除瀏覽器快取並重新載入,即可看到新圖示。

HTML 程式碼片段範例

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ICO 連結上的 sizes="48x48" 屬性,能讓支援 SVG 的瀏覽器優先使用 SVG,同時保留 ICO 作為備用。96 px 的 PNG 則符合 Google 48 的倍數規定。

網頁應用程式 manifest 範例

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

如果你使用建置流程,或想要自動化產生圖示,請參閱開發者資源。

打造實用 favicon 的設計技巧

• 保持簡單。一個形狀、一個字母或一個粗體字母組合圖案,勝過在 16 px 時糊成一團的精細標誌。
• 使用強烈對比。確保圖示在淺色與深色的瀏覽器主題下都清楚可見。加上彩色背景底塊會有幫助。
• 避免使用文字。單一個首字母沒問題;整個單字在這種尺寸下根本看不清楚。
• 預留一點邊距,讓 maskable 和圓角圖示不會裁掉重要的部分。
• 保持一致:與你的標誌和品牌色彩相符,讓 favicon 強化品牌辨識度。
• 在實際裝置上測試,並檢查它在分頁、書籤和 Google 搜尋結果中的樣子。

常見的 favicon 問題

如果你的圖示沒有顯示,通常的原因是快取、路徑錯誤和檔案被封鎖。瀏覽器會積極快取 favicon,因此強制重新整理或開啟新的無痕視窗,通常就足以看到更新。請檢查檔案網址是否回傳 200 狀態碼和正確的內容類型,並確認 <link> 標籤位於 <head> 中。至於搜尋方面,請確保 robots.txt 沒有封鎖圖示或首頁。MakeFav 檢查工具可以幫助你快速找出這些問題。

常見問題

Favicon 是什麼的縮寫?

Favicon 是「favorite icon」(我的最愛圖示)的縮寫。這個名稱來自 Internet Explorer 5,它在 1999 年率先使用小型圖示檔案來裝飾瀏覽器「我的最愛」清單中的項目。即使這個圖示現在出現在許多其他地方,這個名稱仍沿用至今。

Favicon 對 SEO 有幫助嗎?

Favicon 不是直接的排名因素。不過,它確實會在行動版和桌面版的 Google 搜尋結果中顯示於網站名稱旁,因此可以提升品牌辨識度和搜尋結果的視覺吸引力,間接有助於提高點擊。遵循 Google 的規範,才能讓圖示符合顯示的資格。

Favicon 應該用多大的尺寸?

針對 Google 搜尋,請使用 48 像素倍數的正方形圖片,例如 48x48 或 96x96。若要涵蓋更廣的範圍,還應提供一個 ICO 檔案、一個 180x180 的 Apple 觸控圖示,以及 192x192 和 512x512 的 manifest 圖示。另外加上 SVG 也很不錯,因為它可任意縮放。

如果我使用 PNG 或 SVG,還需要 favicon.ico 嗎?

還是建議保留。瀏覽器和部分工具預設會請求 /favicon.ico,較舊的軟體也依賴它。在網站根目錄保留一個 ICO 檔案,可以避免 404 錯誤,並在不支援 SVG 或 PNG 時提供安全的備用方案。

為什麼我的 favicon 沒有更新?

瀏覽器和搜尋引擎會將 favicon 快取很長一段時間。請試試強制重新整理、使用無痕視窗,或清除快取。請確認檔案路徑正確,且新檔案已經上線。在 Google 搜尋中,更換後的圖示可能需要數天或數週才會被重新爬取並更新。