如何在 vue.js webpack 项目上正确设置 favicon.ico？

Question

我使用 vue-cli 创建了一个 vue webpack 项目。

vue init webpack myproject

然后运行dev模式下的项目：

npm run dev

我收到这个错误：

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico

那么在webpack里面，如何正确导入favicon.ico？

Answer 1

查看webpack模板的项目结构：https://vuejs-templates.github.io/webpack/structure.html

注意有一个静态文件夹，还有node_modules、src等

如果您将一些图像放入 static 文件夹，例如 favicon.png，它将在 http://localhost:8080/static/favicon.png

中可用

这是静态资源的文档：https://vuejs-templates.github.io/webpack/static.html

对于您的网站图标问题，您可以将 favicon.ico 或 favicon.png 放入 static 文件夹中，并在 index.html 的 <head> 中引用为如下：

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

如果您未在 index.html 中定义 favicon.ico，则浏览器将从网站根目录请求网站图标（默认行为）。如果你像上面那样指定一个图标，你将不会再看到那个 404。网站图标也将开始显示在您的浏览器选项卡中。

附带说明一下，这是我更喜欢 PNG 而不是 ICO 文件的原因：

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

Answer 2

Laravel 5/6/7/8/9 的小更新，将您的 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>

希望对您有所帮助！

Answer 3

出于某种原因，在将默认 favicon.ico 文件转换为 favicon.png 并将其重命名为 favicon-xyz.png 之前，上述解决方案对我不起作用，例如（我已将此文件放在 /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>

可能对某人有用。

Answer 4

截至 2022 年，@Mani 的回答有点过时了，因为 static assets are now served in public folder other than static.

只需生成一个.ico图标文件（this site提供免费在线图标生成），将其重命名为favicon.ico并放在public文件夹中，无需更改 index.html，重新加载并显示新的图标。

如何在 vue.js webpack 项目上正确设置 favicon.ico？

How to set favicon.ico properly on vue.js webpack project?

html

favicon

webpack

vue.js