.jpg)
您想向您的 wordpress 博客添加網(wǎng)站圖標(biāo)嗎？
網(wǎng)站圖標(biāo)或網(wǎng)站圖標(biāo)是出現(xiàn)在網(wǎng)絡(luò)瀏覽器選項(xiàng)卡中網(wǎng)站標(biāo)題旁邊的小圖像。雖然它看起來(lái)像是一個(gè)微不足道的元素，但精心設(shè)計(jì)的網(wǎng)站圖標(biāo)可以幫助您的博客在擁擠的在線空間中脫穎而出。
在本文中，我們將向您展示如何向您的 WordPress 博客添加網(wǎng)站圖標(biāo)。這樣，您可以給訪客留下難忘的印象。
為什么要向 WordPress 博客添加網(wǎng)站圖標(biāo)？
網(wǎng)站圖標(biāo)對(duì)于添加到您的WordPress 博客至關(guān)重要，因?yàn)樗梢詭椭脩艨焖僮R(shí)別您的網(wǎng)站并增強(qiáng)您的品牌形象。通過(guò)這個(gè)小圖標(biāo)，網(wǎng)站訪問(wèn)者可以輕松識(shí)別您的博客。
網(wǎng)頁(yè)瀏覽器中的網(wǎng)站圖標(biāo)如下所示：
WordPress 圖標(biāo)的另一個(gè)目的是改善用戶體驗(yàn)。當(dāng)多個(gè)選項(xiàng)卡打開(kāi)時(shí)，用戶可以查看圖標(biāo)來(lái)了解他們所在的網(wǎng)站并切換到他們想要的網(wǎng)站。
如果用戶在其移動(dòng)設(shè)備上向您的博客添加快捷方式圖標(biāo)或書(shū)簽，則該圖標(biāo)將在其主屏幕上顯示為應(yīng)用程序圖標(biāo)。這使得他們只需簡(jiǎn)單的點(diǎn)擊即可輕松訪問(wèn)您的網(wǎng)站。
如何為您的 WordPress 博客創(chuàng)建網(wǎng)站圖標(biāo)
首先，讓我們學(xué)習(xí)如何為您的博客創(chuàng)建一個(gè)好的網(wǎng)站圖標(biāo)。
理想的 WordPress 圖標(biāo)大小是寬度和高度均不超過(guò) 512 像素的方形圖像。圖標(biāo)圖像格式可以是 ICO、JPEG、PNG 或 GIF。
如果您經(jīng)營(yíng)商業(yè)博客，那么您可以使用您的品牌徽標(biāo)作為您的網(wǎng)站圖標(biāo)。如果您還沒(méi)有，請(qǐng)查看我們的初學(xué)者指南，了解如何為您的網(wǎng)站創(chuàng)建徽標(biāo)。
如果您已經(jīng)準(zhǔn)備好徽標(biāo)但想要使背景透明，那么您可以使用帶有自動(dòng)背景去除器的免費(fèi)圖像編輯工具。確保文件以 PNG 格式保存，以保持圖標(biāo)的透明度。
您可以使用的另一個(gè)選項(xiàng)是免費(fèi)的圖標(biāo)生成器，例如Favicon.io。該工具可讓您從頭開(kāi)始自定義網(wǎng)站圖標(biāo)并下載 PNG 和 ICO 格式的文件。
話雖如此，讓我們看看如何輕松地將網(wǎng)站圖標(biāo)添加到您的 WordPress 博客中。我們將介紹 4 種方法，您可以點(diǎn)擊下面的鏈接跳至您要使用的方法：
- 方法 1：使用 WordPress 定制器添加 Favicon
- 方法 2：使用 WordPress 全站編輯器添加網(wǎng)站圖標(biāo)
- 方法 3：使用 WordPress Favicon 插件添加 Favicon
- 方法 4：手動(dòng)添加 Favicon 到您的 WordPress 博客
方法 1：使用 WordPress 定制器添加 Favicon
這是在 WordPress 中更改圖標(biāo)的最簡(jiǎn)單方法。您所需要做的就是將您的網(wǎng)站圖標(biāo)圖像上傳到WordPress 定制器，剩下的事情將會(huì)為您處理。
第一步是訪問(wèn) WordPress 定制器。如果您使用經(jīng)典主題，則可以導(dǎo)航至外觀?自定義來(lái)執(zhí)行此操作。
如果您使用的是塊主題并且找不到定制器，請(qǐng)查看我們的指南，了解如何修復(fù) WordPress 管理中缺少的主題定制器。
接下來(lái)，單擊左側(cè)邊欄中的“站點(diǎn)標(biāo)識(shí)”選項(xiàng)卡。
在這里，您將看到用于自定義站點(diǎn)徽標(biāo)、站點(diǎn)標(biāo)題、標(biāo)語(yǔ)和站點(diǎn)圖標(biāo)的選項(xiàng)。
如果您想添加網(wǎng)站的圖標(biāo)，則需要向下滾動(dòng)到“網(wǎng)站圖標(biāo)”部分，然后單擊“選擇網(wǎng)站圖標(biāo)”。
現(xiàn)在將出現(xiàn) WordPress 媒體庫(kù)。您可以選擇現(xiàn)有圖像或從計(jì)算機(jī)上傳新的自定義圖標(biāo)。
在此示例中，我們將使用 WPBeginner 的徽標(biāo)作為 WordPress 站點(diǎn)圖標(biāo)。
選擇圖像后，單擊窗口右下角的“選擇”按鈕。
如果圖標(biāo)大于建議的大小，那么 WordPress 將允許您裁剪它。如果它與建議的尺寸完全匹配，那么您可以保持原樣。
一旦圖像看起來(lái)不錯(cuò)，只需單擊“裁剪圖像”即可。
之后，您將返回到 WordPress 定制器。在這里，您所需要做的就是單擊左側(cè)邊欄中的“發(fā)布”按鈕即可完成您的網(wǎng)站圖標(biāo)設(shè)置。
就是這樣！現(xiàn)在您已經(jīng)上傳了您的網(wǎng)站圖標(biāo)，您可以訪問(wèn)您的WordPress 網(wǎng)站以查看該圖像是否已上線。
方法 2：使用 WordPress 全站編輯器添加網(wǎng)站圖標(biāo)
如果您使用塊主題并希望將品牌徽標(biāo)添加為網(wǎng)站標(biāo)題和網(wǎng)站圖標(biāo)的一部分，那么此方法適合您。
為此，您需要從 WordPress 管理面板轉(zhuǎn)到外觀?編輯器。
在此頁(yè)面上，您將找到幾個(gè)用于自定義網(wǎng)站的菜單，包括導(dǎo)航和樣式。
對(duì)于本教程，您需要單擊“模式”來(lái)訪問(wèn)您的網(wǎng)站標(biāo)題塊模式。
向下滾動(dòng)后，您將看到幾個(gè)模板部分：頁(yè)眉、頁(yè)腳和常規(guī)。
只需單擊“標(biāo)題”模板即可在其中添加您的網(wǎng)站圖標(biāo)。
接下來(lái)，您將在標(biāo)題文本旁邊看到一個(gè)鉛筆按鈕。
單擊它，您可以編輯圖案并插入您的 WordPress 網(wǎng)站圖標(biāo)。
您現(xiàn)在正在體驗(yàn) WordPress 完整站點(diǎn)編輯體驗(yàn)。
現(xiàn)在，單擊添加塊“+”按鈕并搜索站點(diǎn)徽標(biāo)塊。您可以在此處添加將成為 WordPress 圖標(biāo)的圖像。
請(qǐng)隨意將該塊拖放到標(biāo)題中您想要的位置。在此示例中，我們將其放置在網(wǎng)站標(biāo)題旁邊。
接下來(lái)您要做的就是單擊站點(diǎn)徽標(biāo)塊中的上傳圖標(biāo)。
與前一種方法一樣，您可以選擇現(xiàn)有圖像或從WordPress 媒體庫(kù)上傳新圖像。
之后，您需要導(dǎo)航到頁(yè)面右側(cè)的“阻止設(shè)置”側(cè)邊欄。只需打開(kāi)“用作網(wǎng)站圖標(biāo)”設(shè)置即可將徽標(biāo)添加為網(wǎng)站圖標(biāo)。
最后，您可以點(diǎn)擊頁(yè)面右上角的“保存”按鈕來(lái)發(fā)布您的網(wǎng)站圖標(biāo)。
您將看到一條警告，表明更改將影響整個(gè)網(wǎng)站。確保選中“圖標(biāo)”框，然后再次單擊“保存”。
現(xiàn)在您已完成所有步驟，您可以打開(kāi)您的網(wǎng)站來(lái)確認(rèn)更改是否成功。
方法 3：使用 WordPress Favicon 插件添加 Favicon
如果您更喜歡使用 WordPress favicon 插件，那么您可以按照此方法使用RealFaviconGenerator插件提供的免費(fèi) Favicon。
首先，您需要安裝并激活該插件。有關(guān)更多詳細(xì)信息，請(qǐng)按照我們的有關(guān)如何安裝 WordPress 插件的指南進(jìn)行操作。
激活后，轉(zhuǎn)到WordPress 儀表板中的外觀 ?網(wǎng)站圖標(biāo)。
之后，單擊“從媒體庫(kù)中選擇”按鈕上傳新圖像或使用現(xiàn)有圖像。
請(qǐng)注意，您將需要使用方形圖片。該插件建議網(wǎng)站圖標(biāo)的寬度和高度至少為 260 像素，但不小于 70 像素。
選擇圖像后，只需點(diǎn)擊“生成網(wǎng)站圖標(biāo)”按鈕即可。
之后，該插件將引導(dǎo)您訪問(wèn) RealFaviconGenerator 網(wǎng)站來(lái)編輯 favicon。
您可以自定義各種設(shè)置，例如背景顏色及其在 Google 搜索結(jié)果頁(yè)面 (SERP)、ios、android、macos safari、chrome 和 windows Metro 上的外觀。
在“網(wǎng)站圖標(biāo)生成器選項(xiàng)”部分中，如果您的網(wǎng)站之前使用過(guò)網(wǎng)站圖標(biāo)，則可以選中該框。如果是，只需在第二個(gè)字段中輸入一個(gè)數(shù)字來(lái)指示您正在使用的圖標(biāo)版本。
這樣，以前訪問(wèn)過(guò)您網(wǎng)站的用戶將看到新的圖標(biāo)而不是舊的圖標(biāo)。
一旦一切看起來(lái)都不錯(cuò)，您所需要做的就是單擊“生成您的網(wǎng)站圖標(biāo)和 html 代碼”按鈕，將網(wǎng)站圖標(biāo)添加到您的 WordPress 網(wǎng)站。
您的網(wǎng)站圖標(biāo)現(xiàn)在應(yīng)該已啟用。確保保持 WordPress 圖標(biāo)插件處于活動(dòng)狀態(tài)，以便圖標(biāo)始終處于啟用狀態(tài)。
方法 4：手動(dòng)添加 Favicon 到您的 WordPress 博客
最后但并非最不重要的一點(diǎn)是，您可以通過(guò)手動(dòng)編輯主題的代碼文件來(lái)將 WordPress 圖標(biāo)添加到您的博客中。
如果您的主題定制器沒(méi)有“站點(diǎn)標(biāo)識(shí)”部分，或者您使用塊主題并希望使用與站點(diǎn)徽標(biāo)不同的圖標(biāo)圖像，這會(huì)很有幫助。
編輯主題代碼文件最簡(jiǎn)單、最安全的方法是使用WPCode插件。
WPCode 是適合初學(xué)者的最佳代碼片段插件。憑借 100 多個(gè)現(xiàn)成的片段和安全的錯(cuò)誤處理，它允許您安全地編輯主題文件，而不會(huì)破壞您的網(wǎng)站。
另外，WPCode 的偉大之處在于，如果您更新主題，則不會(huì)丟失代碼修改，包括您的網(wǎng)站圖標(biāo)。
對(duì)于本指南，您可以使用WPCode 的免費(fèi)版本。但是，通過(guò)Pro 訂閱，您可以訪問(wèn)智能條件邏輯和第三方集成等功能，以更有效地管理您的代碼。
首先，您需要安裝并激活 WPCode。有關(guān)更多信息，您可以參閱我們有關(guān)如何安裝 WordPress 插件的分步指南。
您需要做的下一件事是準(zhǔn)備您的網(wǎng)站圖標(biāo)文件。為此，您可以使用免費(fèi)的網(wǎng)站圖標(biāo)生成器，例如Favicon.io。
在網(wǎng)站上，您可以單擊“圖像”將圖像文件轉(zhuǎn)換為 zip 文件和 HTML 代碼?；蛘?，您可以使用表情符號(hào)或文本選項(xiàng)，使用可用的表情符號(hào)和字體創(chuàng)建網(wǎng)站圖標(biāo)。
在下一頁(yè)上，您可以上傳圖像。然后，單擊“下載”保存 favicon zip 文件，其中包含 favicon.png 和 favicon.ico 文件。
在執(zhí)行后續(xù)步驟時(shí)，請(qǐng)確保保持此網(wǎng)頁(yè)打開(kāi)。
現(xiàn)在，您需要將 favicon zip 文件上傳到站點(diǎn)的根目錄。為此，您可以使用WordPress主機(jī)的文件管理器。
或者，您可以通過(guò) FileZilla 等 FTP 客戶端來(lái)執(zhí)行此操作。有關(guān)更多詳細(xì)信息，請(qǐng)查看我們的初學(xué)者指南，了解如何使用 FTP 將文件上傳到 WordPress。
通過(guò)文件管理器或 FTP 打開(kāi)網(wǎng)站文件后，導(dǎo)航到根目錄。
WordPress根目錄通常是一個(gè)名為“public”或“public_html”的文件夾，它包含必要的 WordPress 文件夾，例如 wp-content 和 wp-admin。
此時(shí)，您可以將之前下載的所有favicon文件內(nèi)容解壓并上傳到根目錄中。
如果您使用文件管理器，則可以單擊頂部附近的“上傳”按鈕。
然后，將出現(xiàn)一個(gè)新選項(xiàng)卡，要求您上傳文件。
在此頁(yè)面上，您可以單擊“選擇文件”按鈕并選擇所有圖標(biāo)文件。
現(xiàn)在，只需等待文件成功上傳即可。
完成后，您可以返回到文件管理器選項(xiàng)卡。您現(xiàn)在應(yīng)該在根目錄中看到所有的圖標(biāo)文件，如下面的屏幕截圖所示：
現(xiàn)在，讓我們回到 WordPress 管理面板。
在左側(cè)邊欄中，導(dǎo)航至代碼片段?頁(yè)眉和頁(yè)腳。
之后，返回之前的 Favicon.io 選項(xiàng)卡。
然后，您需要從那里復(fù)制 HTML 代碼。
接下來(lái)，您必須返回 WordPress 并將代碼粘貼到 WPCode 頁(yè)面的“標(biāo)題”部分。這會(huì)將代碼添加到您網(wǎng)站的 header.php 文件中。
在代碼中，在所有屬性旁邊的引號(hào)中插入網(wǎng)站的完整 URL?href，如下例所示。如果您的站點(diǎn)使用ssl 證書(shū)，請(qǐng)記住添加http://或。https://
最后，單擊右上角的“保存更改”按鈕。
就是這樣！不要忘記訪問(wèn)您的網(wǎng)站以查看網(wǎng)站圖標(biāo)更改是否成功。
為什么我的 WordPress 網(wǎng)站圖標(biāo)不顯示？
您的 WordPress 圖標(biāo)可能無(wú)法顯示的原因之一是瀏覽器緩存。這意味著您的瀏覽器仍然顯示網(wǎng)站的舊版本。
要解決此問(wèn)題，您需要清除緩存。如果您需要幫助，那么您可以按照我們的指南了解如何清除瀏覽器中的緩存。
要檢查您的 WordPress 網(wǎng)站圖標(biāo)是否已上傳，您可以以隱身模式或私密瀏覽窗口打開(kāi)您的網(wǎng)站。
如果圖標(biāo)安裝不成功，您可以嘗試使用不同的文件名重新上傳圖像來(lái)解決問(wèn)題。
由于混合內(nèi)容錯(cuò)誤，您的 WordPress 網(wǎng)站圖標(biāo)功能也可能無(wú)法正常工作。要解決此問(wèn)題，請(qǐng)查看我們的有關(guān)如何修復(fù) WordPress 混合內(nèi)容錯(cuò)誤的指南。
在某些情況下，您可能還會(huì)發(fā)現(xiàn)您的網(wǎng)站顯示的是托管提供商的圖標(biāo)，而不是您自己的圖標(biāo)。如果發(fā)生這種情況，聯(lián)系他們的支持團(tuán)隊(duì)可以幫助解決問(wèn)題。
我們建議選擇信譽(yù)良好且具有出色客戶支持的 WordPress 托管服務(wù)，以有效解決此類(lèi)問(wèn)題。您可以查看我們的最佳 WordPress 托管提供商列表，找到最適合您網(wǎng)站的選擇。
我們希望本文能幫助您向 WordPress 網(wǎng)站添加網(wǎng)站圖標(biāo)。您可能還想查看我們關(guān)于如何為您的網(wǎng)站制作徽標(biāo)的指南，或者我們專家精選的必備 WordPress 插件來(lái)發(fā)展您的網(wǎng)站。
.png)
