如上圖所示，頁面頂部的小圖標會讓頁面顯得高大上，一般把這種圖標叫做favicon圖標。利用vue-cli腳手架搭建的項目，如果不手動配置，頁面中是不會顯示favicon圖標。
不配置是這樣子的：
favicon圖標的配置也很簡單，vue-cli默認幫我們安裝了html-webpack-plugin（如果沒有，可以自己npm安裝），我們只需在html-webpack-plugin插件中添加favicon選項即可。html-webpack-plugin插件需要配置兩處，一處是在開發環境下配置，另一處是在打包后的環境下配置，如果只配置開發環境下的，沒有配置打包后環境的，造成的結果就是，項目本地運行時會有favicon圖標，打包后放在服務器上時發現沒有favicon圖標；反之亦然。詳細配置如下：
1、開發環境（開發調試時）配置：
2、生產環境（打包后）配置：
注意：配置favicon圖標的路徑是相對路徑！！！
---------------------