如何修復瀏覽器中未顯示的 WordPress Favicon？
已發表: 2021-09-13Favicon 是一個顯示在瀏覽器標題欄中的小圖標。 當您固定網頁時，瀏覽器使用此圖標顯示選項卡。 一些搜索引擎還在搜索結果中顯示網站圖標，從而使其成為網站的品牌圖標。 Google 就是一個很好的例子，我們大多數人都可以找到簡單的 G 圖標表示 Google 搜索網站。 但是，您的 WordPress 網站圖標在 Google Chrome 等瀏覽器中不可見的原因有很多。 如果您正在努力解決問題，這裡有一些您可以嘗試的輸入。
瀏覽器中的 WordPress 網站圖標
以下是圖標在 Google Chrome 桌面瀏覽器中的顯示方式。
當您固定選項卡時，Chrome 將使用該選項卡的圖標，如下所示。
當您嘗試打開網站時，Chrome 還會在地址欄中顯示緩存中的圖標。 同樣，您可以通過查看所有打開的標籤頁來查看移動 Chrome 應用程序中的網站圖標或站點圖標。
幾乎所有桌面和移動瀏覽器也使用網站圖標作為新標籤頁上的快捷方式圖標。 請注意，早期的 Google 搜索在結果頁面中顯示網站的圖標。 然而，谷歌從搜索結果的最新設計中刪除了網站圖標。
修復 WordPress Favicon 未在 Google Chrome 中顯示的問題
如果您無法在 Google Chrome 或任何其他瀏覽器中看到您網站的網站圖標，請按照以下解決方案解決該問題。
WordPress 允許您向網站添加網站圖標。 登錄到您的管理面板後，導航到“外觀 > 自定義 > 站點標識”部分並上傳您的網站圖標圖像。 與標準的網站圖標圖像尺寸不同，WordPress 網站圖標需要為 512 x 512 像素。
您可以為您的站點圖標上傳 .PNG 圖像，並在上傳圖像後檢查它是否在管理面板中正確顯示在瀏覽器中。 如果它工作正常，則打開已發布的站點以查看圖像是否顯示在標題欄中。
許多商業主題提供自定義主題面板來上傳徽標和網站圖標。 如果您已經在使用 WordPress 默認站點圖標功能，請確保禁用您的主題設置圖標。 這將有助於避免在不同地方重疊使用相同的功能，這可能會混淆瀏覽器而不顯示圖標。
建議在瀏覽器標題欄中顯示的網站圖標大小為 16 x 16 或 32 x 32 或 48 x 48 像素。 但是，WordPress 建議使用 512 x 512 像素，因為 WordPress 使用與移動應用程序圖標相同的圖標。 不幸的是，這種較大的圖像尺寸可能會導致無法正確顯示圖像。 由於不同設備需要不同的圖像大小，因此您可以嘗試使用像 RealFaviconGenerator 這樣的圖標插件。
- 首先，在您的站點中安裝並激活插件。
- 轉到“設置> Favicon”菜單並啟用“顯示更新通知”以在有插件更新時接收信息。
- 轉到“外觀 > 網站圖標”部分，然後從媒體庫中選擇您的網站圖標。 如果您沒有圖標，請將“主圖片 URL”留空，然後單擊“生成收藏夾”按鈕。
- 這將帶您進入開發人員的網站，您可以在其中使用不同的選項生成網站圖標。 我們建議使用免費的 favicon 生成器工俱生成一個圖標並上傳使用它作為您的主圖像。
- 向下滾動到底部，然後單擊“生成您的網站圖標和 HTML 代碼”按鈕。
- 您將被自動帶回管理面板，並在不同平台上查看您的圖像預覽。 您還可以立即檢查您的網站圖標以查看它在瀏覽器上的外觀。
當您查看站點的源代碼時，該插件會添加許多鏈接元標記以支持不同的設備。
如果默認的 WordPress 站點圖標在您的站點上不起作用，您可以嘗試使用此插件添加 48 x 48 像素的 favicon.ico 文件。 此外，該插件將幫助您為 iOS 和 macOS Safari 等不同設備生成圖標。 唯一的問題是您需要保持插件處於活動狀態，以便在您的網站上持續使用 favicon。
注意：與您可以在瀏覽器的開發者控制台中看到的所有其他圖像請求不同，您不會看到網站圖標圖像請求。 因此，您必須查看頁面源並找到鏈接在頁眉元標記中的圖標圖像。
如果默認的 WordPress 網站圖標選項不起作用，並且您也出於任何原因不想使用插件，那麼您可以嘗試手動上傳您自己的網站圖標。
- 從免費的網站圖標生成器工具準備您的網站圖標圖像。 確保圖像為 .ico 或 .gif 或 .png 格式，大小為 16 x 16 像素。
- 使用 FTP 登錄到您的 Web 服務器或使用託管面板中的文件管理器應用程序，並在 WordPress 安裝的根目錄中上傳網站圖標圖像。 如果要從管理面板中的媒體庫上傳圖像，請確保使用正確的文件路徑。
- 如果您有任何疑問，請在瀏覽器中打開圖像文件。 您應該能夠訪問與您網站上的任何其他圖像類似的圖像。
- 現在，轉到“外觀 > 主題編輯器”並找到您的主題的 header.php 文件。
- 將以下代碼與其他元標記一起粘貼到 header.php 文件中。
<link rel="icon" type="image/png" href="/favicon.png">- 它應該如下所示，並記住為您的網站圖標圖像使用正確的 URL。
- 單擊“更新文件”按鈕保存更改。
- 如果您不想為此目的編輯主題文件，您可以使用插入頁眉和頁腳等插件並將上述代碼粘貼到頁眉部分區域。
現在打開您的網站並檢查網站圖標是否在標題欄中可見。
favicon 的其他問題之一是許多託管公司（如 Bluehost 和 HostGator）在某些頁面上使用自己的圖標。 例如，當您查看圖像或查看源代碼時，您將看到 HostGator 和 Bluehost 圖標，而不是您站點的圖標。
SiteGround 和其他託管公司不會發生這種情況。 您可以做的是檢查根安裝以查看是否有任何可用的圖標並將其替換為您自己的圖標。 否則，請聯繫託管支持以檢查是否可以解決此問題。
另一個可能發生的問題是由於網站圖標位置。 在我們的站點中，我們使用單獨的子域來保存所有媒體文件。 如果您沒有在元鏈接 href 值中提供正確的圖像路徑，這可能會產生問題。 因此，請確保提供正確的路徑並在您提供的位置測試您的圖像是否可訪問，以避免出現任何問題。
某些瀏覽器（如 macOS 中的 Safari）的工作方式有所不同。 您可以根據需要啟用或禁用網站圖標。 查看我們關於如何在 Safari 中啟用 favicon 的文章，如果您的瀏覽器提供此功能，請確保您已啟用此設置。
如果您要更改圖標或使用具有相同文件名的不同圖像，請確保清除緩存。
- 如果您使用 WP Rocket、W3 Total Cache 等緩存插件，請清除您網站上的緩存。
- 接下來，退出您的管理面板並在 Windows 中按“Control + Shift + Delete”或在 macOS 中按“Command + Shift + Delete”。 這將打開清除瀏覽歷史記錄彈出窗口。 選擇“瀏覽歷史記錄”和“緩存的圖像和文件”選項並刪除它們。
- 現在，打開您的網站並檢查它是否在瀏覽器中顯示了正確的圖標。
在移動設備上，您需要轉到設置或歷史記錄部分並清除瀏覽數據。
最後的話
早期的 favicon 僅由瀏覽器使用。 但是，相同的元鏈接標籤用於不同的圖標，例如 iOS 的 apple-touch-icon。 因此，最好在您的站點上使用所有必要的圖標並測試它們在瀏覽器和其他設備中的工作情況。 在這種情況下，默認的 WordPress 站點圖標可能不夠用，您需要使用自己的元標記或使用提供此功能的主題或插件。