2022 年添加 WordPress Favicon 的 3 種簡單方法（初學者友好指南）
已發表: 2018-09-11準備好了解有關 WordPress 網站圖標的所有信息了嗎？
如果您不熟悉，您網站的 favicon 就是出現在 Web 瀏覽器選項卡上的那個小圖標。 例如，這是我們在 HeroThemes 中的 favicon 的樣子：
您還會看到一些人將網站圖標稱為“站點圖標”。 別擔心——它們是一樣的。
在這篇文章中，您將學習：
- 為什麼你應該關心像你的 WordPress favicon 這樣的小東西
- 如何為您的 WordPress 網站創建網站圖標（以及要使用的大小和格式）
- 如何使用三種不同的方法將網站圖標添加到 WordPress
為什麼你應該關心你的 WordPress Favicon
我知道我知道。 僅出現在瀏覽器選項卡中的小圖像可能不會成就或破壞您的業務。 但是有兩個原因，您應該花一些時間為 WordPress 創建網站圖標。
首先，使用網站圖標有助於打造品牌並使您的網站在訪問者的瀏覽器中脫穎而出。 例如，在下面的屏幕截圖中，哪些選項卡引起了您的注意？
這是 HeroThemes 和 Twitter，對吧？
這很重要，因為人們喜歡打開多個標籤（不——你不是唯一一個囤積標籤的人！ ）。 甚至早在 2009 年，人們平均使用 3 個以上的標籤，年輕人中更多。 雖然我找不到更多最近的數據，但我願意打賭平均值已經上升，而不是下降！
除了在瀏覽器中為您的網站打上品牌並使其脫穎而出之外，您的網站圖標還有助於移動用戶。 如果用戶將您的網站保存到他們的主屏幕，您的網站圖標將在許多設備上顯示為圖標。
當您考慮添加 WordPress 網站圖標是多麼容易時，這些好處絕對值得您花幾分鐘時間。
如何創建正確大小和格式的網站圖標圖像
在您按照下一節中有關如何將網站圖標添加到 WordPress 的分步說明進行操作之前，您需要……實際擁有要用於網站圖標的圖像！
這意味著您需要了解網站圖標的正確圖像尺寸和格式。
隨著設備陣列的出現，這變得比以前更複雜了。 但是為了解決這種複雜性，還有一些工具可以使用一個入門圖標並為所有不同的設備自動格式化。
因此，要創建您的網站圖標，您只需要以下內容：
- 一個正方形的圖像。 最佳的 WordPress 圖標大小是 512×512 像素，儘管像 260×260 像素這樣更小的尺寸仍然可以接受。 我將向您展示的所有方法都將根據需要調整它的大小。
- png圖像，這是現代網絡的最佳選擇。
要實際創建圖像，您可以使用 Adobe Photoshop 或 GIMP 等工具。 或者，您也可以使用 Favicon.io 之類的工具從文本或表情符號生成網站圖標圖像。
如果你有一個高分辨率的標誌，最簡單的方法就是抓住你標誌的方形版本（這就是我們在 HeroThemes 使用的）。
如何將 Favicon 添加到 WordPress（3 種方法）
獲得圖像文件後，您就可以將該網站圖標添加到您的 WordPress 網站了。
下面，我將向您展示三種將網站圖標添加到 WordPress 的不同方法。 不過，每種方法都有點不同。
為了幫助您選擇適合您網站的網站，這裡有一個簡要說明：
- 添加具有核心 WordPress 功能的網站圖標- 這非常簡單，可讓您通過 WordPress 定制器添加您的網站圖標。 唯一的缺點是它不會為所有設備添加網站圖標格式。 不過，對於大多數網站來說，這完全沒問題。
- RealFaviconGenerator WordPress 插件——這使得為所有設備添加網站圖標變得非常容易。 唯一潛在的缺點是它需要您保持插件處於活動狀態，有些人可能不喜歡。
- RealFaviconGenerator 手動方法——不使用插件，您可以使用 RealFaviconGenerator 的網站並手動添加代碼。 此方法無需保持插件處於活動狀態，但會變得更複雜一些，因為您需要將代碼片段添加到主題的標題中。
如果您是初學者，我建議您堅持前兩種方法中的一種。 但高級用戶可能更喜歡第三種方法。
如何使用核心功能向 WordPress 添加 Favicon
這個非常簡單，因為它使用了 WordPress 的核心功能。
首先，轉到 WordPress 儀表板中的外觀 → 自定義以訪問 WordPress 定制器：
進入 WordPress 定制器後，單擊站點標識選項：
然後，找到站點圖標部分並單擊選擇圖片以上傳您的網站圖標圖片：
這將打開常規的 WordPress 媒體庫，您可以在其中像往常一樣上傳圖像。
上傳圖片後，單擊“選擇”按鈕：
從那裡，WordPress 將為您提供裁剪圖標圖像的選項，以及作為瀏覽器和應用程序的圖像實時預覽。
調整到正確的裁剪，然後單擊裁剪圖像：
你完成了！ 確保單擊 WordPress 定制器頂部的發布選項，您的網站圖標應該是活動的。
如何使用 WordPress Favicon 插件（涵蓋更多設備）
現在，我將向您展示如何使用 WordPress favicon 插件來實現相同的效果。
再說一次——這種方法與前一種方法的區別在於，該插件將為更多設備添加優化的網站圖標。 它還為您提供了一個界面，可讓您自定義網站圖標在不同設備上的外觀。
您將能夠為以下內容創建自定義網站圖標：
- iOS
- 安卓
- 視窗手機
- 等等。
你不一定需要這個——它更多的是關於覆蓋邊緣情況。
要遵循此方法，您需要安裝免費的 Favicon by RealFaviconGenerator 插件。
激活插件後，轉到Appearance → Favicon 。 使用從媒體庫中選擇按鈕上傳或從 WordPress 媒體庫中選擇您的網站圖標。
然後，單擊Generate favicon ：
之後，該插件會將您帶到一個外部站點，您可以在其中調整您的網站圖標在不同設備上的查找方式。
完成這些調整後，向下滾動並單擊Generate your Favicons and HTML code按鈕：
一旦您單擊它，您將被帶回您的 WordPress 儀表板，並且應該會看到一條成功消息，以及您在不同設備上的 favicon 預覽：
而已！ 你都完成了。 只需確保保持插件處於活動狀態 - 否則，您的網站圖標將消失。
如何使用相同的 RealFaviconGenerator 工具手動將 Favicon 添加到 WordPress
同樣，使用上面的插件方法，您需要保持插件處於活動狀態才能繼續使用您的網站圖標。
如果這對您來說是個問題，您還可以使用相同的工具手動完成所有操作。
最終結果完全相同，您只需通過 FTP 手動上傳圖片，並將一些代碼添加到您網站的 <head> 部分。
我將把這個分成幾個步驟，因為它有點複雜......
第 1 步：生成您的 Favicon 包
要開始使用，請前往 RealFaviconGenerator 網站並單擊選擇您的網站圖標圖片以上傳您的網站圖標圖片：
上傳圖片後，您將在插件中看到相同的界面，您將能夠為不同的設備瀏覽和自定義您的網站圖標。
與插件一樣，向下滾動到底部並在完成調整後單擊生成您的網站圖標和 HTML 代碼按鈕：
第 2 步：將您的 Favicon 包上傳到您的網站
在下一個屏幕上，單擊按鈕下載您的Favicon包：
然後，您需要提取此包並使用 FTP 將其上傳到站點的根文件夾（如果您不確定 FTP 是什麼，我建議您堅持使用上一節中的插件方法）。
確保將所有文件放在根文件夾中 - 否則將無法正常工作。
第 3 步：將代碼片段添加到主題的 <head>
要完成這些工作，您需要將 RealFaviconGenerator 中的代碼片段添加到 WordPress 主題的<head>部分：
或者，您可以將以下代碼片段添加到子主題中的functions.php文件中（您需要使用子主題）：
/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};
任何一種方法都可以！
一旦你這樣做了，你就完成了，你的網站圖標應該開始工作了。
立即添加您的 WordPress 網站圖標
只需幾分鐘即可添加您的網站圖標並為您的訪問者提供更具品牌化的體驗。
這是偉大的事情：
一旦您將網站圖標添加到您的 WordPress 網站，您就不必再考慮它了！
您對如何添加 WordPress 網站圖標還有其他問題嗎？ 在評論中告訴我們，我們會提供幫助！