favicon 不只是個圖標

favicon 的概念

favicon 中文譯名是收藏夾圖標，不僅是網站的頭像，也是其可以讓瀏覽器的收藏夾中除了顯示相應的標題外，還以圖標的方式區分不同的網站。

瀏覽器的支援

FF 瀏覽器還支援動態的favicon，讓你的網站更有個性

一個冷知識

favicon 在一定程度上減輕伺服器的流量頻寬，一般為了提高網站的可用性，我們都會為自己的網站創建一個自訂的404錯誤文件，在這種情況下，如果網站沒有相應的favicon.ico文件，每當有用戶收藏網站/網頁時， Web伺服器都會調用這個自訂的404文件，並在網站的錯誤日誌中記錄。這顯然是應該予以避免的。

偶爾設定了favicon 發現沒有顯示

• 首先檢查格式是否正確：

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

現在格式已經沒有那麼嚴格了， 沒有type 也是可以的

• 現在格式已經沒有那麼嚴格了，沒有type 也是可以的
  強制清除緩存，就可以看到標籤頁的圖示了。

webpack 怎麼打包 favicon ？

如果你是用html-webpack-plugins 來處理html的話，這個插件已經提供了favicon ，你只要寫好favicon 所在的路徑就可以了， 如：

const htmlPlugin = new HtmlWebpackPlugin({
    favicon: path.resolve(publicDir, './imgs/favicon.ico')
});
pluginsConfig.push(htmlPlugin);

插件就會自動幫你打包到html 的head 裡面;不是的話需要自己處理這個圖標，再引用

更多favicon 不只是個圖標 相關文章請關注PHP中文網！

🎜