如何在 vue.js webpack 项目中正确设置 Favicon.ico？

小开

最佳答案

查看 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?

小开

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>

希望能有帮助！

小开

由于某种原因，上述解决方案并不适用于我之前转换默认的 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>

可能对某人有用。

小开

As of 2022, @Mani answer is a little outdated as 静态资产现在服务于 ABC0文件夹，而不是 static文件夹。

只需生成一个 .ico图标文件(这个网站提供免费的在线图标生成) ，将其重命名为 favicon.ico并将其放置在 public文件夹中，不需要更改 index.html，重新加载和新的图标将显示。

小开

谢谢。这个按照“八球”的评论完成了任务。我需要将文件移动到/public 文件夹并将其重命名为: D

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>gear.png">
<title>Prodigy</title>
</head>

小开

您可以使用资产发生器为每个平台生成一套完整的图标。