設置網(wǎng)頁圖標（favicon）的正確方法包括三個步驟。1. 準備符合規(guī)范的圖標文件，推薦使用 .ico 格式，也可使用 .png 或 .svg，尺寸建議為 16×16、32×32 或 64×64 像素，可用在線工具轉換格式，背景透明更佳，多尺寸可打包在一個 .ico 文件中。2. 將圖標文件放置在網(wǎng)站根目錄，確保瀏覽器能自動識別并加載。3. 在 html 的
部分添加引用代碼，如 <link rel="icon" href="/favicon.ico" type="image/x-icon">，若使用多尺寸圖標則分別添加對應尺寸標簽。雖然操作簡單，但需注意路徑錯誤、格式不兼容和緩存問題，確認無誤后即可正常顯示。
設置網(wǎng)頁的圖標（也就是favicon）其實不難，但很多人第一次做的時候容易忽略一些細節(jié)。正確的做法是把一個符合規(guī)范的小圖標文件放到網(wǎng)站根目錄，并在HTML代碼里加上對應的引用標簽。
1. 準備 favicon 圖標文件
Favicon 最常見的格式是 .ico，當然現(xiàn)在也支持 .png 或 .svg。一般來說，準備一個 16×16、32×32 或者 64×64 像素的圖標就可以了。
- 如果你沒有現(xiàn)成的 .ico 文件，可以用在線工具把 png 轉成 ico，比如 Online-Convert。
- 圖標建議使用透明背景，這樣在不同瀏覽器和主題下顯示效果更好。
- 多尺寸的圖標可以打包在一個 .ico 文件里，這樣瀏覽器會自動選擇最合適的尺寸。
2. 把圖標文件放到正確的位置
雖然可以在 HTML 中指定任意路徑，但為了穩(wěn)妥起見，建議把 favicon.ico 放在網(wǎng)站的根目錄下。這樣即使你不加任何 link 標簽，有些瀏覽器也會自動去請求 /favicon.ico。
立即學習“前端免費學習筆記（深入）”；
如果你用的是靜態(tài)網(wǎng)站托管服務（比如 gitHub Pages、Vercel、Netlify），上傳到項目根目錄即可。
3. 在 HTML 中添加引用代碼
打開你的 index.html 文件，在
部分加入下面這行代碼：
<link rel="icon" href="/favicon.ico" type="image/x-icon">
如果你想用 .png 格式，也可以改成：
<link rel="icon" href="/favicon.png" type="image/png">
如果你做了多尺寸圖標，也可以這樣寫：
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"> <link rel="icon" href="/favicon-64x64.png" sizes="64x64" type="image/png">
不過大多數(shù)情況下，只放一個通用的 icon 就夠用了。
基本上就這些。操作起來不算復雜，但有幾個點容易出錯：
比如路徑不對、圖標格式不兼容、緩存導致看不到更新等。只要確認好文件位置和格式，一般都能順利顯示。
