vue项目报favicon.ico错误

最新推荐文章于 2025-10-14 15:45:30 发布

原创最新推荐文章于 2025-10-14 15:45:30 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

小技巧专栏收录该内容

15 篇文章

订阅专栏

vue项目报favicon.ico错误，

/favicon.ico:1 GET http://localhost/favicon.ico net::ERR_CONNECTION_REFUSED

vite中创建vue的index.html代码是：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="vite.svg" sizes="any"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

发现没有favicon.ico的常规代码，一般是：

<link rel="icon" href="./favicon.ico" type="image/x-icon">

这个需要到专门的在线制作ico图标的网站，将图片转换成ico图片。

而vue中使用svg文件，可以直接显示的。用chrome浏览器，就能正常显示。所以，出现这个问题，没有使用最新版的chrome浏览器，用最新的chrome浏览器就可以识别svg图形文件。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

andux

关注关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

如何优雅地处理Django中的favicon.ico图标详解

12-25

favicon.ico是网站的图标也是网站的头像，简单来说，就是让我们的网站更加好看。本文主要给大家介绍了关于优雅处理Django中favicon.ico图标的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的...

解决Vue 项目打包后favicon无法正常显示的问题

12-07

在Vue项目中，常见做法是将favicon.ico文件与index.html文件一同放在项目根目录下，并在index.html中正确设置引用路径。然而，这种配置在项目启动或打包后往往无法生效。 Vue项目经过webpack打包后，文件结构会发生...

参与评论您还未登录，请先登录后发表或查看评论

Vue -- 解决favicon.ico:1 GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)问题

最新发布

qq_21810059的博客

10-14

445

Favicon（Favorite Icon的缩写）是显示在浏览器标签页、书签列表和历史记录中的小型网站图标。减少 404 请求：若未提供 favicon.ico，浏览器仍会自动请求该路径，导致不必要的 404 错误日志（虽不影响功能，但增加服务器负担）。缺少 Favicon 的网站在浏览器中会显示默认空白或通用图标，容易让用户产生“临时页面”“测试站点”或“不完整”的印象，影响信任度。href=“/favicon.ico” 是这个ico图标在项目中的地址，是根路径，然后把这个link标签。

解决Vue用Nginx做web服务器报错favicon.ico 404 (Not Found)的问题

weixin_33798152的博客

05-26

1939

　　有多种解决方案 1、vue静态资源　　vue中为网页增加favicon的最便捷的方式为使用link标签 <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico" rel="external nofollow" /> 　　先在static目录下添加favicon，至于为什么要在static...

解决VUE报错GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)

XunLin233的博客

09-26

1223

当我们启动VUE项目的时候控制台会报错错误GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)原因就是项目下的 favicon.ico 找不见，缺少一个页签图标。这个时候选中的图片就会作为网页的图标进行展示，控制台也不再报错。在根目录下放置一张图片，重命名为。

解决报错：favicon.ico:1 GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)

weixin_52954097的博客

09-15

5547

因为选择Open with Live Server，他会在当前文件夹的根目录开一个小的服务器端口号为5500，然后把根目录下面的所有文件和文件夹资源当作这个服务器的根资源去使用。这是游览器的一个默认的行为，游览器打开任意的网站，都会去请求网页的页签图标，你这里没有，就会404 Not Found 找不到资源。找到项目的根目录，在根目录的位置，随变找一个图片放上，把路径改为favicon.ico。选择Open with Live Server。记住，一定放在项目根目录位置，否则还是不中。

在node.js中怎么屏蔽掉favicon.ico的请求

10-20

在Node.js中屏蔽favicon.ico请求的方法主要是通过修改路由处理逻辑来实现的。在Web开发中，favicon.ico是网页的图标，通常用于显示在浏览器标签页上。当用户访问网页时，浏览器会自动尝试获取该图标，除非服务器已经...

给vue项目添加favicon.ico图标

格の调

03-08

2398

效果如下：操作步骤： 1、本地环境下的favicon.ico配置：如上图的截图，如果本地环境不需要可不配置，但是配置完需要重新执行 npm run dev，如果执行此命令报错，说明下图所示的favicon地址配置不正确。 2、线上项目的favicon.ico配置：配置完毕后重新执行：npm run build，重新打包。在浏览器运行dist>index.html文件，即可看到效果。 ...

vue 项目线上环境出现 favicon.ico 不显示怎么办

jmszl1991的博客

03-27

5523

vue 项目线上环境出现 favicon.ico 不显示怎么办？一直提示报错： GET HTTP: xxx.xxxx.xxx.xxx:8080/favicon.ico 404 (Not Found);总之是没找到这个文件；一打包之后，favicon.ico 这个文件就不见了，问题肯定出现在webpack输出配置中；所以从两方面入手：第一步：修改webpack配置；同时在...

关于favicon.ico的报错：RoutingError

fantaxy025025的专栏

03-31

827

错误： ActionController::RoutingError (No route matches [GET] "/favicon.ico"): ActionController::RoutingError (No route matches [GET] "/favicon.ico"): actionpack (3.2.8) lib/action_dispatch/middle...

Django中 favicon.ico 报错问题

白发渔礁江渚上……

02-25

1557

报错原因是项目中没这个 favicon.ico的图片文件。所以解决办法就是在项目的 urls.py 文件中添加一个路由，并映射到 favicon.ico 这个文件。网上有不少解决办法，自己总结了这个办法，觉得是自由度和可控度最好的办法了。 1、下图是项目的 settings.py 文件的配置情况，红色箭头指定的目录，就是自己用来存放 favicon.ico 的目录。目录内容如下： 2、配置项目的 url 映射 from django.contrib import admin from djang

html ico不显示,vue 项目线上环境出现 favicon.ico 不显示怎么办

weixin_33626238的博客

06-25

880

Vue打包后出现的bug -favicon.ico' because it violates the following Content Security Policy direc

weixin_44415368的博客

07-22

4371

打开vue的项目，但是页面显示的是Cannot GET，打开控制台之后，发现有一篇红色报错。 //Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'non...

Vue.js - Vue 2.0 项目 favicon.ico 不显示解决方案

08-12

1985

Vue.js - Vue 2.0 项目 favicon.ico 不显示解决方案

vue项目中favicon.ico图标不显示

a5252145的博客

11-07

2111

favicon.ico图标添加

网站报错Not Found favicon.ico ?

Jeffrey的博客

11-23

2192

熟悉的情境，自己开发的系统甚至打开很多已上线的系统，浏览器访问，F12打开调试工具，控制台总能看到如下图404错误。不是啥大问题，强迫症也不能忍，今天就这个问题我们来一探究竟。所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中、标签栏上除显示相应的标题外，还能以图标的形式区别不同的网站。如下即为百度的favicon 网站添加favicon 第一步：找一张看着顺眼的图片，然后百度搜索ico图片转换，保存转换后的文件；第二步：ico格式的图.

vue设置favicon.ico图标

Hoey的博客

03-17

1510

favicon.ico存放位置将avicon.ico在根目录下 (与index.html放在同一级) 方式一 <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> 方式二 /build/webpack.dev.conf.js new HtmlWebpackPlugin({ filen...

vue项目修改favicon.ico

02-08

### 更改 Vue.js 项目中的 Favicon.ico 图标 #### 使用配置文件统一管理 Favicon 路径为了简化不同项目的Favicon管理，可以在配置文件中设置Favicon路径。通过这种方式，在多个地方使用的HTML模板可以引用同一个配置项，从而减少重复劳动和错误发生的可能性。对于Vue CLI创建的应用程序来说，可以通过`vue.config.js`来进行全局性的配置调整[^1]： ```javascript // vue.config.js module.exports = { chainWebpack: config => { config.plugin('html').tap(args => { args[0].favicon = './src/assets/favicon.ico'; return args; }); } } ``` 此段代码会告诉HtmlWebpackPlugin使用指定位置的图片作为网页标签页的小图标。 #### 利用 JavaScript 动态加载 Favicon 另一种方式是在应用初始化阶段利用JavaScript动态改变文档头部链接元素指向的新图标资源地址[^2]: ```javascript function changeFavIcon(url){ let link = document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = url; document.getElementsByTagName('head')[0].appendChild(link); } changeFavIcon('/path/to/new-favicon.ico'); // 替换成实际图标URL ``` 这种方法的好处在于不需要重新编译整个应用程序就可以即时更新浏览器Tab上的显示图像。 #### 修改 Webpack 配置以支持静态资源处理如果上述两种方法未能达到预期效果，则可能是因为构建工具链对静态资产的支持不够完善所致。此时应该检查并适当修改WebPack的相关配置选项，比如在`build/webpack.dev.conf.js`里面加入如下所示的一行配置[^3]: ```javascript new HtmlWebpackPlugin({ ... favicon: path.resolve(__dirname, '../static/bitbug_favicon.ico'), }) ``` 这一步骤确保打包过程中能够正确识别并引入所需的Favicon文件。 #### 手动编辑 HTML 文件指明新图标路径最直接的办法就是直接操作位于`public/index.html`内的<link>标记，把其`href`属性更改为所要替换的那个`.ico`文件的位置[^4]: ```html  <!DOCTYPE html> <html lang="en"> <head>  <link rel="icon" href="%PUBLIC_URL%/new-favicon.ico"> </head> <body> ... </body> </html> ``` 完成以上任一或组合措施之后，请记得重启开发服务器以便使改动生效，并确认新的Favicon已经成功应用于页面之上。