Html 如何在 vue.js webpack 项目中正确设置 favicon.ico？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40190524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set favicon.ico properly on vue.js webpack project?
提问by Alfred Huang
I have created a vue webpackproject using vue-cli.
我创建了一个vue webpack使用vue-cli.
vue init webpack myproject
And then ran the project under devmode:
然后在dev模式下运行项目：
npm run dev
I got this error:
我收到此错误：
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
加载资源失败：服务器响应状态为 404（未找到）http://localhost:8080/favicon.ico
So inside webpack, how to import the favicon.icocorrectly?
那么在webpack里面，如何favicon.ico正确导入呢？
回答by Mani
Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html
查看webpack模板的项目结构：https://vuejs-templates.github.io/webpack/structure.html
Note that there is a static folder, along with node_modules, src, etc.
请注意，有一个静态的文件夹，连同node_modules，src等等。
If you put some image into the staticfolder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png
如果您将一些图像放入static文件夹中，例如favicon.png，它将在http://localhost:8080/static/favicon.png 中可用
Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html
这是静态资产的文档：https: //vuejs-templates.github.io/webpack/static.html
For your favicon issue, you can put a favicon.icoor favicon.pnginto the staticfolder and refer in the <head>of your index.html as follows:
对于您的 favicon 问题，您可以将favicon.ico或favicon.png放入static文件夹并在<head>index.html 中引用，如下所示：
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
If you do not define a favicon.icoin your index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.
如果你没有定义favicon.ico在你的index.html，那么浏览器就会从网站的根目录（默认行为）一个图标请求。如果您按上述方式指定网站图标，您将不会再看到 404。该图标也将开始显示在您的浏览器选项卡中。
As a side note, here is the reason why I prefer PNG instead of ICO file:
作为旁注，这就是我更喜欢 PNG 而不是 ICO 文件的原因：
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
回答by eightball
Little update for Laravel 5.x, place your favicon.icoor favicon.pnginto the /publicfolder and refer to it in your index.htmllike this:
Laravel 5.x 的小更新，将您的favicon.ico或favicon.png放入/public文件夹并在您的index.html像这样引用它：
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
Hope it helps !
希望能帮助到你 ！
回答by tjurkan
For some reason, the above solutions did not work for me before converting the default favicon.icofile to favicon.pngand renaming it to favicon-xyz.pnge.g. (I have put this file in /publicfolder) and edited the index.htmlfile as follows:
出于某种原因，在将默认favicon.ico文件转换为favicon.png并将其重命名为favicon-xyz.pngeg（我已将此文件放在/public文件夹中）并按index.html如下方式编辑文件之前，上述解决方案对我不起作用：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
.
.
.
</head>
Might be useful for someone.
可能对某人有用。
