您想向您的 wordpress 博客添加網站圖標嗎？

網站圖標或網站圖標是出現在網絡瀏覽器選項卡中網站標題旁邊的小圖像。雖然它看起來像是一個微不足道的元素，但精心設計的網站圖標可以幫助您的博客在擁擠的在線空間中脫穎而出。

在本文中，我們將向您展示如何向您的 wordpress 博客添加網站圖標。這樣，您可以給訪客留下難忘的印象。

為什么要向 WordPress 博客添加網站圖標？

網站圖標對于添加到您的WordPress 博客至關重要，因為它可以幫助用戶快速識別您的網站并增強您的品牌形象。通過這個小圖標，網站訪問者可以輕松識別您的博客。

網頁瀏覽器中的網站圖標如下所示：

WordPress 圖標的另一個目的是改善用戶體驗。當多個選項卡打開時，用戶可以查看圖標來了解他們所在的網站并切換到他們想要的網站。

如果用戶在其移動設備上向您的博客添加快捷方式圖標或書簽，則該圖標將在其主屏幕上顯示為應用程序圖標。這使得他們只需簡單的點擊即可輕松訪問您的網站。

如何為您的 WordPress 博客創建網站圖標

首先，讓我們學習如何為您的博客創建一個好的網站圖標。

理想的 WordPress 圖標大小是寬度和高度均不超過 512 像素的方形圖像。圖標圖像格式可以是 ICO、JPEG、PNG 或 GIF。

如果您經營商業博客，那么您可以使用您的品牌徽標作為您的網站圖標。如果您還沒有，請查看我們的初學者指南，了解如何為您的網站創建徽標。

如果您已經準備好徽標但想要使背景透明，那么您可以使用帶有自動背景去除器的免費圖像編輯工具。確保文件以 PNG 格式保存，以保持圖標的透明度。

您可以使用的另一個選項是免費的圖標生成器，例如Favicon.io。該工具可讓您從頭開始自定義網站圖標并下載 PNG 和 ICO 格式的文件。

話雖如此，讓我們看看如何輕松地將網站圖標添加到您的 WordPress 博客中。我們將介紹 4 種方法，您可以點擊下面的鏈接跳至您要使用的方法：

• 方法 1：使用 WordPress 定制器添加 Favicon
• 方法 2：使用 WordPress 全站編輯器添加網站圖標
• 方法 3：使用 WordPress Favicon 插件添加 Favicon
• 方法 4：手動添加 Favicon 到您的 WordPress 博客

方法 1：使用 WordPress 定制器添加 Favicon

這是在 WordPress 中更改圖標的最簡單方法。您所需要做的就是將您的網站圖標圖像上傳到WordPress 定制器，剩下的事情將會為您處理。

第一步是訪問 WordPress 定制器。如果您使用經典主題，則可以導航至外觀?自定義來執行此操作。

如果您使用的是塊主題并且找不到定制器，請查看我們的指南，了解如何修復 WordPress 管理中缺少的主題定制器。

接下來，單擊左側邊欄中的“站點標識”選項卡。

在這里，您將看到用于自定義站點徽標、站點標題、標語和站點圖標的選項。

如果您想添加網站的圖標，則需要向下滾動到“網站圖標”部分，然后單擊“選擇網站圖標”。

現在將出現 WordPress 媒體庫。您可以選擇現有圖像或從計算機上傳新的自定義圖標。

在此示例中，我們將使用 WPBeginner 的徽標作為 WordPress 站點圖標。

選擇圖像后，單擊窗口右下角的“選擇”按鈕。

如果圖標大于建議的大小，那么 WordPress 將允許您裁剪它。如果它與建議的尺寸完全匹配，那么您可以保持原樣。

一旦圖像看起來不錯，只需單擊“裁剪圖像”即可。

之后，您將返回到 WordPress 定制器。在這里，您所需要做的就是單擊左側邊欄中的“發布”按鈕即可完成您的網站圖標設置。

就是這樣！現在您已經上傳了您的網站圖標，您可以訪問您的WordPress 網站以查看該圖像是否已上線。

方法 2：使用 WordPress 全站編輯器添加網站圖標

如果您使用塊主題并希望將品牌徽標添加為網站標題和網站圖標的一部分，那么此方法適合您。

為此，您需要從 WordPress 管理面板轉到外觀?編輯器。

在此頁面上，您將找到幾個用于自定義網站的菜單，包括導航和樣式。

對于本教程，您需要單擊“模式”來訪問您的網站標題塊模式。

向下滾動后，您將看到幾個模板部分：頁眉、頁腳和常規。

只需單擊“標題”模板即可在其中添加您的網站圖標。

接下來，您將在標題文本旁邊看到一個鉛筆按鈕。

單擊它，您可以編輯圖案并插入您的 WordPress 網站圖標。

您現在正在體驗 WordPress 完整站點編輯體驗。

現在，單擊添加塊“+”按鈕并搜索站點徽標塊。您可以在此處添加將成為 WordPress 圖標的圖像。

請隨意將該塊拖放到標題中您想要的位置。在此示例中，我們將其放置在網站標題旁邊。

接下來您要做的就是單擊站點徽標塊中的上傳圖標。

與前一種方法一樣，您可以選擇現有圖像或從WordPress 媒體庫上傳新圖像。

之后，您需要導航到頁面右側的“阻止設置”側邊欄。只需打開“用作網站圖標”設置即可將徽標添加為網站圖標。

最后，您可以點擊頁面右上角的“保存”按鈕來發布您的網站圖標。

您將看到一條警告，表明更改將影響整個網站。確保選中“圖標”框，然后再次單擊“保存”。

現在您已完成所有步驟，您可以打開您的網站來確認更改是否成功。

方法 3：使用 WordPress Favicon 插件添加 Favicon

如果您更喜歡使用 WordPress favicon 插件，那么您可以按照此方法使用RealFaviconGenerator插件提供的免費 Favicon。

首先，您需要安裝并激活該插件。有關更多詳細信息，請按照我們的有關如何安裝 WordPress 插件的指南進行操作。

激活后，轉到WordPress 儀表板中的外觀 ?網站圖標。

之后，單擊“從媒體庫中選擇”按鈕上傳新圖像或使用現有圖像。

請注意，您將需要使用方形圖片。該插件建議網站圖標的寬度和高度至少為 260 像素，但不小于 70 像素。

選擇圖像后，只需點擊“生成網站圖標”按鈕即可。

之后，該插件將引導您訪問 RealFaviconGenerator 網站來編輯 favicon。

您可以自定義各種設置，例如背景顏色及其在 Google 搜索結果頁面 (SERP)、ios、android、macos Safari、chrome 和 Windows Metro 上的外觀。

在“網站圖標生成器選項”部分中，如果您的網站之前使用過網站圖標，則可以選中該框。如果是，只需在第二個字段中輸入一個數字來指示您正在使用的圖標版本。

這樣，以前訪問過您網站的用戶將看到新的圖標而不是舊的圖標。

一旦一切看起來都不錯，您所需要做的就是單擊“生成您的網站圖標和 html 代碼”按鈕，將網站圖標添加到您的 WordPress 網站。

您的網站圖標現在應該已啟用。確保保持 WordPress 圖標插件處于活動狀態，以便圖標始終處于啟用狀態。

方法 4：手動添加 Favicon 到您的 WordPress 博客

最后但并非最不重要的一點是，您可以通過手動編輯主題的代碼文件來將 WordPress 圖標添加到您的博客中。

如果您的主題定制器沒有“站點標識”部分，或者您使用塊主題并希望使用與站點徽標不同的圖標圖像，這會很有幫助。

編輯主題代碼文件最簡單、最安全的方法是使用WPCode插件。

WPCode 是適合初學者的最佳代碼片段插件。憑借 100 多個現成的片段和安全的錯誤處理，它允許您安全地編輯主題文件，而不會破壞您的網站。

另外，WPCode 的偉大之處在于，如果您更新主題，則不會丟失代碼修改，包括您的網站圖標。

對于本指南，您可以使用WPCode 的免費版本。但是，通過Pro 訂閱，您可以訪問智能條件邏輯和第三方集成等功能，以更有效地管理您的代碼。

首先，您需要安裝并激活 WPCode。有關更多信息，您可以參閱我們有關如何安裝 WordPress 插件的分步指南。

您需要做的下一件事是準備您的網站圖標文件。為此，您可以使用免費的網站圖標生成器，例如Favicon.io。

在網站上，您可以單擊“圖像”將圖像文件轉換為 zip 文件和 HTML 代碼。或者，您可以使用表情符號或文本選項，使用可用的表情符號和字體創建網站圖標。

在下一頁上，您可以上傳圖像。然后，單擊“下載”保存 favicon zip 文件，其中包含 favicon.png 和 favicon.ico 文件。

在執行后續步驟時，請確保保持此網頁打開。

現在，您需要將 favicon zip 文件上傳到站點的根目錄。為此，您可以使用WordPress主機的文件管理器。

或者，您可以通過 FileZilla 等 FTP 客戶端來執行此操作。有關更多詳細信息，請查看我們的初學者指南，了解如何使用 FTP 將文件上傳到 WordPress。

通過文件管理器或 FTP 打開網站文件后，導航到根目錄。

WordPress根目錄通常是一個名為“public”或“public_html”的文件夾，它包含必要的 WordPress 文件夾，例如 wp-content 和 wp-admin。

此時，您可以將之前下載的所有favicon文件內容解壓并上傳到根目錄中。

如果您使用文件管理器，則可以單擊頂部附近的“上傳”按鈕。

然后，將出現一個新選項卡，要求您上傳文件。

在此頁面上，您可以單擊“選擇文件”按鈕并選擇所有圖標文件。

現在，只需等待文件成功上傳即可。

完成后，您可以返回到文件管理器選項卡。您現在應該在根目錄中看到所有的圖標文件，如下面的屏幕截圖所示：

現在，讓我們回到 WordPress 管理面板。

在左側邊欄中，導航至代碼片段?頁眉和頁腳。

之后，返回之前的 Favicon.io 選項卡。

然后，您需要從那里復制 HTML 代碼。

接下來，您必須返回 WordPress 并將代碼粘貼到 WPCode 頁面的“標題”部分。這會將代碼添加到您網站的 header.php 文件中。

在代碼中，在所有屬性旁邊的引號中插入網站的完整 URL?href，如下例所示。如果您的站點使用ssl 證書，請記住添加http://或。https://

最后，單擊右上角的“保存更改”按鈕。

就是這樣！不要忘記訪問您的網站以查看網站圖標更改是否成功。

為什么我的 WordPress 網站圖標不顯示？

您的 WordPress 圖標可能無法顯示的原因之一是瀏覽器緩存。這意味著您的瀏覽器仍然顯示網站的舊版本。

要解決此問題，您需要清除緩存。如果您需要幫助，那么您可以按照我們的指南了解如何清除瀏覽器中的緩存。

要檢查您的 WordPress 網站圖標是否已上傳，您可以以隱身模式或私密瀏覽窗口打開您的網站。

如果圖標安裝不成功，您可以嘗試使用不同的文件名重新上傳圖像來解決問題。

由于混合內容錯誤，您的 WordPress 網站圖標功能也可能無法正常工作。要解決此問題，請查看我們的有關如何修復 WordPress 混合內容錯誤的指南。

在某些情況下，您可能還會發現您的網站顯示的是托管提供商的圖標，而不是您自己的圖標。如果發生這種情況，聯系他們的支持團隊可以幫助解決問題。

我們建議選擇信譽良好且具有出色客戶支持的 WordPress 托管服務，以有效解決此類問題。您可以查看我們的最佳 WordPress 托管提供商列表，找到最適合您網站的選擇。

我們希望本文能幫助您向 WordPress 網站添加網站圖標。您可能還想查看我們關于如何為您的網站制作徽標的指南，或者我們專家精選的必備 WordPress 插件來發展您的網站。