现象:
打开网站主页,在chrome浏览器的console中出现以下错误:
Failed to load resource: the server responded with a status of 404 (Not Found) :3000/favicon.ico
Not Found
404
NotFoundError: Not Found
at C:\Users\Jet\WebstormProjects\HelloWorld\app.js:27:8
at Layer.handle [as handle_request] (C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:317:13)
at C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:275:10)
at C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:635:15
at next (C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:260:14)
at Function.handle (C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:174:3)
at router (C:\Users\Jet\WebstormProjects\HelloWorld\node_modules\express\lib\router\index.js:47:12)
原因:
该项目没有favicon.ico这个文件
解决办法:
方案1
1. 在线生成自己的favicon.ico
2. 将生成的favicon.ico放在根目录,即public文件夹下
3. 在模板的Head标签中引入favicon.ico
<head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
方案2
在模板的Head标签中使用以下链接
<link rel="shortcut icon" href="#" />
本地服务器本机测试:
http://localhost:3000/favicon.ico 确保资源路径正确
本地服务器外机测试:
http://192.168.0.2:3000/
注意:
测试过程中注意清除浏览器缓存,在chrome中可以通过F12查看浏览器对favicon.ico的请求
在第一次请求加载favicon.ico到本地后,chrome会自动缓存图标,后面不会再请求favicon.ico,所以服务端有favicon.ico刷新的时候,需要在浏览器端清除缓存后,才会显示新的图标, 有时还需要关闭浏览器才会生效!!!