現象:
打開網站首頁,在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
<head>
<link rel="icon" href="/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" type="image/x-icon">
<link rel="stylesheet" href="/stylesheets/style.css" target="_blank" rel="external nofollow" >
</head>
方案2
在模闆的Head标簽中使用以下連結
<link rel="shortcut icon" href="#" target="_blank" rel="external nofollow" />
本地伺服器本機測試:
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重新整理的時候,需要在浏覽器端清除緩存後,才會顯示新的圖示, 有時還需要關閉浏覽器才會生效!!!