天天看點

建立自己的favicon.ico供浏覽器擷取避免404Not Found

現象:

打開網站首頁,在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重新整理的時候,需要在浏覽器端清除緩存後,才會顯示新的圖示, 有時還需要關閉浏覽器才會生效!!!

繼續閱讀