有多種解決方案css
一、vue靜態資源html
vue中爲網頁增長favicon的最便捷的方式爲使用link標籤vue
<link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" rel="external nofollow" />
先在static目錄下添加favicon，至於爲何要在static下加，待會解釋webpack
而後，在index.html入口加上引入的link標籤nginx
<link href="./static/favicon.ico" mce_href="./static/favicon.ico" rel="icon" type="image/x-icon">
而後build打包便可，就不會再報這個錯誤。web
解釋：vue-cli
從href屬性咱們能夠知道，這個favicon.ico文件被放在static文件夾下。那可不能夠像平時的網頁那樣放在根目錄下呢？緩存
本人測試爲false。好比我把其放在src/assets下面，bulid出來發現沒有這個favicon.ico這個文件。服務器
使用vue-cli構建vue項目的最後一步爲build，build後獲得一個dist文件夾，目錄以下：app
dist ├── index.html └── static ├── css │ ├── app.98d86b95fddce7c6712349c91fd3ac42.css │ └── app.98d86b95fddce7c6712349c91fd3ac42.css.map ├── favicon.ico ├── img │ └── icon.b36fe83.png └── js ├── app.8fece2e344934ca56814.js ├── app.8fece2e344934ca56814.js.map ├── manifest.1f0d87f2abce4b6b3d40.js ├── manifest.1f0d87f2abce4b6b3d40.js.map ├── vendor.6e85d686677580e84eb8.js └── vendor.6e85d686677580e84eb8.js.map
當將這個文件放在根目錄下的時候，build出來的項目裏不會含有favicon.ico文件。
從static的字面意思來說，靜態的，除了文件的靜態性，還包含有文件路徑的靜態性。build先後index.html都有同級目錄的static文件夾，所以build先後引用的路徑不會發生改變。我的猜想跟webpack的打包方式有關，它會去拷貝一個static文件夾，而後在往裏面添加打包後的文件（不知這樣理解的是否正確）。
二、nginx配置
Nginx的error日誌中會按期抱怨說沒有找到favicon.ico文件？發生這種錯誤的緣由通常是Nginx在根目錄上找不到這個文件。咱們能夠在網上下載一個ico文件放在根目錄下面就能夠了。
可是如今的業務場景有些區別：我使用Nginx做爲前臺服務器，在80端口接收全部的http請求，對本地能緩存的資源直接提供服務，不然轉發到upstream上的其餘服務器處理，好比轉給fastDFS，或者是ATS等等。
我如今在根目錄下存放一個ico文件，如何讓Nginx直接去本地拿這個文件，而不轉發給其餘服務器呢？直接在nginx.conf中增長下面一行就能夠了：
# set site favicon location /favicon.ico { root html; }
這樣就能夠正常看到ico圖標了。