切換菜單

- 主頁
- 文章
- 科技類
- 如何修復瀏覽器中未顯示的 WordPress Favicon？

# 如何修復瀏覽器中未顯示的 WordPress Favicon？

已發表: 2021-09-13

Favicon 是一個顯示在瀏覽器標題欄中的小圖標。 當您固定網頁時，瀏覽器使用此圖標顯示選項卡。 一些搜索引擎還在搜索結果中顯示網站圖標，從而使其成為網站的品牌圖標。 Google 就是一個很好的例子，我們大多數人都可以找到簡單的 G 圖標表示 Google 搜索網站。 但是，您的 WordPress 網站圖標在 Google Chrome 等瀏覽器中不可見的原因有很多。 如果您正在努力解決問題，這裡有一些您可以嘗試的輸入。

## 瀏覽器中的 WordPress 網站圖標

以下是圖標在 Google Chrome 桌面瀏覽器中的顯示方式。

Chrome 標題欄中的 Favicon

當您固定選項卡時，Chrome 將使用該選項卡的圖標，如下所示。

固定選項卡中的網站圖標

當您嘗試打開網站時，Chrome 還會在地址欄中顯示緩存中的圖標。 同樣，您可以通過查看所有打開的標籤頁來查看移動 Chrome 應用程序中的網站圖標或站點圖標。

iPhone Safari 應用程序中的網站圖標

幾乎所有桌面和移動瀏覽器也使用網站圖標作為新標籤頁上的快捷方式圖標。 請注意，早期的 Google 搜索在結果頁面中顯示網站的圖標。 然而，谷歌從搜索結果的最新設計中刪除了網站圖標。

## 修復 WordPress Favicon 未在 Google Chrome 中顯示的問題

如果您無法在 Google Chrome 或任何其他瀏覽器中看到您網站的網站圖標，請按照以下解決方案解決該問題。

1. 檢查 WordPress 網站圖標設置

WordPress 允許您向網站添加網站圖標。 登錄到您的管理面板後，導航到“外觀 > 自定義 > 站點標識”部分並上傳您的網站圖標圖像。 與標準的網站圖標圖像尺寸不同，WordPress 網站圖標需要為 512 x 512 像素。

WordPress 中的 Favicon 選項

您可以為您的站點圖標上傳 .PNG 圖像，並在上傳圖像後檢查它是否在管理面板中正確顯示在瀏覽器中。 如果它工作正常，則打開已發布的站點以查看圖像是否顯示在標題欄中。

2. 刪除您的主題的 Favicon

許多商業主題提供自定義主題面板來上傳徽標和網站圖標。 如果您已經在使用 WordPress 默認站點圖標功能，請確保禁用您的主題設置圖標。 這將有助於避免在不同地方重疊使用相同的功能，這可能會混淆瀏覽器而不顯示圖標。

3. 使用 Favicon 插件

建議在瀏覽器標題欄中顯示的網站圖標大小為 16 x 16 或 32 x 32 或 48 x 48 像素。 但是，WordPress 建議使用 512 x 512 像素，因為 WordPress 使用與移動應用程序圖標相同的圖標。 不幸的是，這種較大的圖像尺寸可能會導致無法正確顯示圖像。 由於不同設備需要不同的圖像大小，因此您可以嘗試使用像 RealFaviconGenerator 這樣的圖標插件。

- 首先，在您的站點中安裝並激活插件。

安裝 RealFaviconGenerator 插件

- 轉到“設置> Favicon”菜單並啟用“顯示更新通知”以在有插件更新時接收信息。

網站圖標設置

- 轉到“外觀 > 網站圖標”部分，然後從媒體庫中選擇您的網站圖標。 如果您沒有圖標，請將“主圖片 URL”留空，然後單擊“生成收藏夾”按鈕。

從庫中選擇圖像

- 這將帶您進入開發人員的網站，您可以在其中使用不同的選項生成網站圖標。 我們建議使用免費的 favicon 生成器工俱生成一個圖標並上傳使用它作為您的主圖像。

從計算機中選擇圖像

- 向下滾動到底部，然後單擊“生成您的網站圖標和 HTML 代碼”按鈕。

生成 Favicon 和 HTML

- 您將被自動帶回管理面板，並在不同平台上查看您的圖像預覽。 您還可以立即檢查您的網站圖標以查看它在瀏覽器上的外觀。

預覽和檢查網站圖標

當您查看站點的源代碼時，該插件會添加許多鏈接元標記以支持不同的設備。

在源代碼中鏈接元標記

如果默認的 WordPress 站點圖標在您的站點上不起作用，您可以嘗試使用此插件添加 48 x 48 像素的 favicon.ico 文件。 此外，該插件將幫助您為 iOS 和 macOS Safari 等不同設備生成圖標。 唯一的問題是您需要保持插件處於活動狀態，以便在您的網站上持續使用 favicon。

注意：與您可以在瀏覽器的開發者控制台中看到的所有其他圖像請求不同，您不會看到網站圖標圖像請求。 因此，您必須查看頁面源並找到鏈接在頁眉元標記中的圖標圖像。

4. 手動上傳 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。

在主題文件中插入鏈接元標記

- 單擊“更新文件”按鈕保存更改。
- 如果您不想為此目的編輯主題文件，您可以使用插入頁眉和頁腳等插件並將上述代碼粘貼到頁眉部分區域。

現在打開您的網站並檢查網站圖標是否在標題欄中可見。

5. 刪除默認主機圖標

favicon 的其他問題之一是許多託管公司（如 Bluehost 和 HostGator）在某些頁面上使用自己的圖標。 例如，當您查看圖像或查看源代碼時，您將看到 HostGator 和 Bluehost 圖標，而不是您站點的圖標。

託管公司圖標

SiteGround 和其他託管公司不會發生這種情況。 您可以做的是檢查根安裝以查看是否有任何可用的圖標並將其替換為您自己的圖標。 否則，請聯繫託管支持以檢查是否可以解決此問題。

另一個可能發生的問題是由於網站圖標位置。 在我們的站點中，我們使用單獨的子域來保存所有媒體文件。 如果您沒有在元鏈接 href 值中提供正確的圖像路徑，這可能會產生問題。 因此，請確保提供正確的路徑並在您提供的位置測試您的圖像是否可訪問，以避免出現任何問題。

6. Mac Safari 中的 Favicon

某些瀏覽器（如 macOS 中的 Safari）的工作方式有所不同。 您可以根據需要啟用或禁用網站圖標。 查看我們關於如何在 Safari 中啟用 favicon 的文章，如果您的瀏覽器提供此功能，請確保您已啟用此設置。

7. 清除您的站點和瀏覽器緩存

如果您要更改圖標或使用具有相同文件名的不同圖像，請確保清除緩存。

- 如果您使用 WP Rocket、W3 Total Cache 等緩存插件，請清除您網站上的緩存。
- 接下來，退出您的管理面板並在 Windows 中按“Control + Shift + Delete”或在 macOS 中按“Command + Shift + Delete”。 這將打開清除瀏覽歷史記錄彈出窗口。 選擇“瀏覽歷史記錄”和“緩存的圖像和文件”選項並刪除它們。
- 現在，打開您的網站並檢查它是否在瀏覽器中顯示了正確的圖標。

刪除瀏覽器中的緩存文件

在移動設備上，您需要轉到設置或歷史記錄部分並清除瀏覽數據。

## 最後的話

早期的 favicon 僅由瀏覽器使用。 但是，相同的元鏈接標籤用於不同的圖標，例如 iOS 的 apple-touch-icon。 因此，最好在您的站點上使用所有必要的圖標並測試它們在瀏覽器和其他設備中的工作情況。 在這種情況下，默認的 WordPress 站點圖標可能不夠用，您需要使用自己的元標記或使用提供此功能的主題或插件。

分享，謝謝！
如何將 WordPress 單站點移動到多站點，反之亦然？

有關如何將 WordPress 單站點移動到多站點（反之亦然）以遷移所有內容和設置重定向的分步說明。

閱讀更多
WordPress 中用戶角色的初學者指南

WordPress 用戶角色初學者指南解釋了默認角色的功能、創建用戶和為用戶分配角色。

閱讀更多
5 個常見的 WordPress 錯誤修復

常見 WordPress 錯誤列表，如數據庫連接、PHP 和語法錯誤、找不到頁面和內部服務器錯誤以及修復。

閱讀更多
如何在 WordPress 中使用 Google AdSense 插件？

了解如何使用適用於 WordPress 的 Google AdSense 插件插入廣告並使用默認和 PHP 插入方法有效地選擇展示位置。

閱讀更多
什麼是安卓應用？ – 簡介

了解什麼是 android 應用程序以及 android 移動應用程序的工作原理。 探索安卓應用的意義和功能。

閱讀更多