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

问题描述 投票：0回答：7

我使用 

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

vue init webpack myproject

然后在

dev
模式下运行项目：

npm run dev

我收到此错误：

无法加载资源：服务器响应状态为 404（未找到）http://localhost:8080/favicon.ico

那么在webpack内部，如何正确导入

favicon.ico
？

html vue.js webpack favicon
7个回答
181
投票

查看 webpack 模板的项目结构：https://vuejs-templates.github.io/webpack/struction.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>

如果您未在 

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

顺便说一句，这就是我更喜欢 PNG 而不是 ICO 文件的原因：

favicon.png 与 favicon.ico - 为什么我应该使用 PNG 而不是 ICO？

23
投票

出于某种原因，在将默认 

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>

可能对某人有用。

15
投票

Laravel 5 到 11 的小更新，将您的 

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>

希望有帮助！

7
投票

截至 2022 年，@Mani 的答案有点过时了，因为 静态资产现在在 

public
文件夹中提供，而不是 
static
。

只需生成一个

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

2
投票

只需在 

shortcut
标签中添加 
rel
即可：

<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
1
投票

您可以使用 vue-pwa-asset-generator 为每个平台生成全套图标。

0
投票

谢谢。根据八球评论，这确实达到了目的。我需要将文件移动到 /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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.