參考網站

問題原因

瀏覽器初到新網站時，會試著下載名為 Favicon (Favorite Icon) 的網站代表圖示，用在地址列、頁籤、書籤(我的最愛)上。

若網頁沒特別指定，瀏覽器預設會抓取網站根路徑的 /favicon.ico 檔案，找不到就算了不會觸發錯誤。

一般我們不為會為測試、開發用網站設計圖示，但瀏覽器仍會在第一次存取時嘗試下載 /favicon.ico，不意外地以 HTTP 404 收場：

嚴格來說，瀏覽器會記住結果，404 失敗只會發生一次(直到瀏覽器重啟)，大小 5KB 說來無傷大雅。但它最困擾我的地方是使用 F12 網路工具或 Fidder 抓封包時，觀察結果天下飛來一筆 /favicon.ico 404，說明時還要額外解釋，蠻煩人的。

解決方式

爬文查了避免瀏覽器抓 /favicon.ico 的方法，有以下幾種：

1. Firefox 25+ 不支援

1

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

2. 有些舊瀏覽器不支援 (Android Lollipop)

1

<link rel="icon" href="data:,">

3. 註：若有設定 Content-Security-Policy default-src ‘self’ 會封限 data:image/png … 來源，需調整為 default-src 'self' data: 參考

1

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">

結論

結論：若只考慮 Chrome，三種做法均可避免瀏覽器嘗試存取 favicon.ico，第三種做法涵蓋瀏覽器最廣。