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

jdzmm42g 于 2022-11-13 发布在 Webpack

关注(0)|答案(6)|浏览(354)

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

vue init webpack myproject

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

npm run dev

我得到这个错误：
无法加载资源：服务器以404（未找到）http://localhost:8080/favicon.ico状态响应
那么在webpack内部，如何正确导入favicon.ico呢？

webpack

来源：https://stackoverflow.com/questions/40190524/how-to-set-favicon-ico-properly-on-vue-js-webpack-project

6条答案

按热度按时间

ruyhziif1#

查看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问题，您可以将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，那么浏览器将从网站根目录请求一个favicon（默认行为）。如果您如上所述指定了一个favicon，您将不再看到404。该favicon也将开始显示在您的浏览器选项卡中。
作为一个侧记，这里是为什么我更喜欢PNG而不是ICO文件的原因：
favicon.png vs favicon.ico - why should I use PNG instead of ICO?

赞(0）回复(0）举报 2022-11-13

cqoc49vn2#

由于某种原因，在将默认的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>

可能对某人有用。

赞(0）回复(0）举报 2022-11-13

vnjpjtjt3#

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>

希望能有所帮助！

赞(0）回复(0）举报 2022-11-13

cwdobuhd4#

截至2022年，@Mani answer有点过时，因为静态资产现在在public文件夹而不是static文件夹中提供服务。
只需生成一个.ico图标文件（this site提供免费的在线图标生成），将其重命名为favicon.ico，并将其放置在public文件夹中，无需更改index.html，重新加载后将显示新的图标。

赞(0）回复(0）举报 2022-11-13

bjg7j2ky5#

您可以使用vue-pwa-asset-generator为每个平台生成一整套收藏夹图标。

赞(0）回复(0）举报 2022-11-13

dgsult0t6#

谢谢。这是按照eightballs评论的技巧。我需要将文件移动到/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>

赞(0）回复(0）举报 2022-11-13

我来回答

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

6条答案

相关问题

热门标签

最新问答