首頁 > web前端 > html教學 > favicon 不只是個圖標

favicon 不只是個圖標

高洛峰
發布: 2017-02-15 14:00:41
原創
1676 人瀏覽過

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中文網!

🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板