有多种解决方案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图标了。