vue項目--favicon設置以及動態修改favicon（網站頂頭的.icon小圖標）

favicon圖標的制作請看我前面的文章：https://blog.csdn.net/muzidigbig/article/details/80492902

favicon.ico一般用於作為縮略的網站標志,它顯示位於瀏覽器的地址欄或者在標簽上,用於顯示網站的logo,如圖紅圈的位置， 目前主要的瀏覽器都支持favicon.ico圖標.

 

 

 目前vue-cli搭建的vue項目里面已經有了一個static文件夾，存放靜態文件。

 

 

 

favicon圖片放到該文件夾下。

然后再index.html中添加：

<link rel="icon" href="static/剛剛生成.ico的地址" type="image/x-icon" />  
<link rel="shortcut icon" href="static/剛剛生成.ico的地址" type="image/x-icon"  /><!-- 必須 -->

然后保存刷新瀏覽器，就會更新。（需重新運行項目npm run dev）

如果沒有效果，則查看你的build文件夾下：build/webpack.dev.conf.js中。（到這個步驟之前我的是出現了，並且正常顯示，如果不顯示，則配置一下吧。）

 new HtmlWebpackPlugin({      
　　filename: 'index.html',      
　　template: 'index.html',      
　　inject: true,      
　　// favicon圖標(這里需要圖標的路徑與頁面中的路徑一樣)      
　　// favicon: 'static/bitbug_favicon.ico'       
   // favicon: path.resolve('static/bitbug_favicon.ico')      

   favicon:'static/bitbug_favicon.ico' 
 }),

 

 

 

 

 

 

到這個時候，頁面的favicon已經可以正常顯示了。(重新運行項目）

————————————————
版權聲明：本文為CSDN博主「muzidigbig」的原創文章，遵循CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/muzidigbig/article/details/80493320