项目场景：

一个简单的html页面，配置了webpack5去进行打包，没有用任何框架。纯html+ts+less

问题描述

GET http://localhost:8080/src/favicon.ico 404 (Not Found)
运行起来回报这个错误，在入口文件index.html页面添加下面代码，不行

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

还是会报错，找不到图片，但是换成网页链接就可以
这个是可以的（网页链接，没有直接从本地引入）：

<link rel="icon" href="http://gf-yuntu.oss-cn-beijing.aliyuncs.com/website/officialWebsite/imgs/web_head.png" type="image/x-icon">

原因分析：

可能是webpack5的原因，图片地址的引入会受影响，不能直接这么引入吧。也有可能是我猜错了，反正我也不知道为什么会这样。哼，气死。

解决方案：

在webpack.config.js中增加


const HTMLWebpackPlugin = require('html-webpack-plugin');...
plugins: [new HTMLWebpackPlugin({ favicon: path.resolve(__dirname, './src/favicon.ico'), // 在这里配置ico图标template: "./src/index.html" // 这里设置入口文件})],
...

没有html-webpack-plugin的话，先下载 npm i -D html-webpack-plugin

【webpack5配置favicon.ico】相关推荐

在基于Spring MVC的应用程序中配置favicon.ico
Favicon是与您的网站相关的图标(favicon.ico). 并非每个网站都在使用favicon. 但是大多数浏览器并不关心它,反正他们都要求它. 当图标图标不在适当位置时,服务器将返回不必要的4 ...
vue配置favicon.ico图标
一.添加内容在vue工程目录build文件夹下webpack.dev.conf.js与webpack.prod.conf.js文件中的 html-webpack-plugin添加一条favicon: ...
python django整理（五）配置favicon.ico，解决警告Not Found: /favicon.ico
Django 浏览器打开警告Not Found: /favicon.ico,解决问题需要三步 1.首先准备favicon.ico图片,网上有很多转化工具,放到在前面python django整理(四) ...
nginx前端网页小图标配置（favicon.ico not found问题）
问题我们自己搭建nginx服务并挂上前端静态资源,按F12会看到有个当前ip和端口下的favicon.ico资源get请求返回404,在nginx后台日志里也能看到CreateFile()的错误.这 ...
不能忽略的Nginx做web服务器的favicon.ico图像找不到问题
我们在使用Nginx搭建HTTP的web server的过程中,一般都很顺利,默认的网站根目录一般是/usr/local/nginx/html,我们也可以正常访问到Nginx的欢迎信息,比如使用下面的 ...
Spring-Boot：写出来的网站访问不到静态资源？怎样通过url访问SpringBoot项目中的静态资源？localhost:8989/favicon.ico访问不了工程中的图标资源？
Spring-Boot:Spring-Boot写出来的网站访问不到静态资源?怎样通过url访问SpringBoot项目中的静态资源?localhost:8989/favicon.ico访问不了工程中的 ...
nginx忽略favicon.ico日志
说明: favicon.ico占用nginx error_log日志大量信息,把我们真正需要查看的日志给覆盖.因此这里,我们通过log_not_found off关闭它. 实现: //把以下配置放到 ...
「工具」PWA Manifest图标及 favicon.ico 生成工具
PWA 其中有一个能力就是把网站安装到系统桌面,以原生应用的体验来运行网站,使用户无需再找开浏览器输入网址进入网站,而是可以直接点击安装好的应用直接运行,给使网站访问缩短路径及增加网站的曝光度. 其中 ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...

【webpack5配置favicon.ico】

项目场景：

问题描述

原因分析：

解决方案：

【webpack5配置favicon.ico】相关推荐

最新文章

热门文章