创建自己的favicon.ico供浏览器获取避免404

 

现象：

打开网站主页，在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

https://tool.lu/favicon/

2. 将生成的favicon.ico放在根目录，即public文件夹下

3. 在模板的Head标签中引入favicon.ico

方案2

在模板的Head标签中使用以下链接

 

本地服务器本机测试：

http://localhost:3000/favicon.ico    确保资源路径正确

http://localhost:3000/

本地服务器外机测试：

http://192.168.0.2:3000/

 

注意：

测试过程中注意清除浏览器缓存，在chrome中可以通过F12查看浏览器对favicon.ico的请求

在第一次请求加载favicon.ico到本地后，chrome会自动缓存图标，后面不会再请求favicon.ico，所以服务端有favicon.ico刷新的时候，需要在浏览器端清除缓存后，才会显示新的图标, 有时还需要关闭浏览器才会生效！！！