如何向您的 WordPress 網站添加 Favicon

已發表: 2020-05-06

Favicon 或收藏夾圖標是瀏覽器選項卡上頁面標題旁邊的小圖像。 此站點圖標在建立您的網站身份方面起著至關重要的作用。

如果您擁有專業網站，請考慮使用網站圖標（如果您還沒有的話）。 在這裡，我們將討論它的重要性以及準備一個時要考慮的事項。 我們還將向您展示有關如何向 WordPress 網站添加網站圖標的三種方法。

為什麼要使用 Favicon？

為了證明網站圖標的重要性，請看下面的屏幕截圖。

最喜歡的圖標示例

如您所見，每個選項卡都有不同的圖標來區分您正在訪問的網頁。 當您的瀏覽器上有一堆標籤時，網站圖標可幫助您識別這些頁面。 因此，它創造了更好的用戶體驗。

收藏夾圖標不僅在瀏覽器選項卡中有用。 當用戶將頁面快捷方式添加到其移動主屏幕或桌面時，屏幕上將顯示該圖標。 最重要的是，網站圖標的工作方式類似於徽標。 當人們看到它時，他們會立即認出您的網站和品牌。

準備你的網站圖標

創建網站圖標最快捷、最簡單的方法是使用網站圖標生成器。 不需要任何技術知識，因為它們中的大多數都提供現成的圖像，您只需稍作調整即可。

也可以考慮使用您品牌的徽標，但要確保可以將其裁剪為方形圖標。 它也必須看起來足夠簡單，儘管它的尺寸很小，但您可以清楚地看到它。 使用 Photoshop、DesignWizard 或 GIMP 等圖像編輯程序來修改和調整徽標的大小。

對於圖像的格式，建議使用 ICO 文件，因為大多數瀏覽器都支持它。 但是，並非所有照片編輯軟件都允許您創建 ICO 文件。 因此，最好使用提供該選項的在線圖標生成器。 或者，將您的圖像保存為 PNG 並使用在線 ICO 轉換器。 通常，大小必須為 16 x 16 像素。

如果您使用 WordPress 4.3 的站點圖標功能，則無需擔心事先轉換圖片。 您現在可以上傳任何圖像文件作為您的收藏夾圖標。 無論如何，請始終確保上傳後可以在任何瀏覽器中查看。

向 WordPress 網站添加 Favicon 的 3 種方法

您可以通過三種方法向網站添加網站圖標，選擇您喜歡的選項。

選項 1：WordPress 定制器

對於 WordPress 4.3 用戶，使用站點圖標功能是添加收藏夾圖標最方便和推薦的方式。

準備一個高度和寬度都至少為 512 像素的方形圖像。 該文件不應超過 128 MB。 如果您有矩形圖像，它們將允許您在上傳favicon 時對其進行裁剪。

準備好圖像後，請按照下列步驟操作：

1. 打開您的 WordPress 儀表板，轉到外觀，然後選擇自定義。

2. 查找包含站點圖標的選項卡。 大多數主題都會在站點標識中包含它，但有些主題會將選項卡重命名為站點標題、品牌名稱、站點徽標和標題等。

自定義側面標識

3. 選擇站點圖標並從您的媒體庫中選擇一個圖像或上傳一個新文件。

4. 您將進入裁剪圖像編輯器。 根據需要調整位置和比例。

裁剪圖像

5. 恭喜！ 你應該有一個新的圖標。 如果它還沒有出現，WordPress 建議清除緩存並重新啟動瀏覽器。

選項 2：使用插件

如果你還沒有更新你的 WordPress，你可以使用插件來添加一個 favicon 。

一些插件讓您可以更好地控製網站圖標在非桌面設備上的外觀。 例如，RealFaviconGenerator 的 Favicon 為您提供了在不同操作系統中自定義圖標外觀的選項。

要使用該插件，請執行以下步驟：

  1. 轉到插件並單擊 WordPress 儀表板上的新增。
  2. 通過 RealFaviconGenerator 搜索 Favicon，然後安裝並激活插件。
  3. 選擇外觀並單擊儀表板中的Favicon 。 上傳大於 70 x 70 像素的方形圖片。 理想情況下，圖片應為 260 x 260 像素或更大。
  4. 您將被重定向到一個頁面，您可以在其中設置您的網站圖標在 iOS、Android Chrome、Windows 和 Safari 中的外觀。 然後單擊生成您的收藏夾和 HTML 代碼。
適用於 android chrome 的圖標

除了該插件，您還可以使用 All in One Favicon。 該插件允許您為後端和前端設置不同的圖標。 這樣，當您的網站和儀表板都打開時，您就不會感到困惑。

選項 3：通過 FTP 客戶端手動安裝

另一種方法是手動將您的網站圖標上傳到您的 WordPress 網站。 為此，您需要將您的網站連接到 FileZilla 等 FTP 客戶端。 您的圖標可以是 ICO 或 PNG 格式，並應命名為 favicon。

還強烈建議您創建子主題以使用此方法。 這樣，當有新的主題更新時，您的代碼更改不會被刪除。

連接您的站點後，請執行以下步驟：

  1. 通過您的 FTP 客戶端將您的圖標文件上傳到您當前的主題文件夾。 如果您使用的是子主題，請將其上傳到該文件夾。
  2. 將相同的文件添加到您的根目錄。 它應該與您的 wp-content 和 wp-admin 位於同一文件夾中。 這是為了確保您的收藏夾可以在提要閱讀器中查看。
  3. 在您的 WordPress 儀表板上，轉到外觀並單擊主題編輯器。
  4. 現在，如果您有 ICO 文件，請選擇 Theme Header 文件並在標籤內添加以下代碼：

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

用你的根目錄的路徑替換 href= 之後的部分，直到 /favicon.ico。 它看起來像這樣：

<link rel="shortcut icon" href="<http://www.yourdomainname.com/favicon.ico" />

如果您有 PNG 文件，只需替換文件格式即可。 然後更新文件。

5. 刷新您的網站。 如果它有效，你現在應該有一個新的圖標。

對於所有方法，不要忘記檢查您的網站圖標在移動設備中的外觀。 從您的移動瀏覽器打開您的網站並將該網站添加到您的主屏幕。

雖然它們很小，但網站圖標可以提高品牌知名度並創造更好的用戶體驗。 您可以使用在線收藏夾圖標生成器或您選擇的任何圖像編輯軟件來創建您自己的收藏夾圖標。 如果您已經有了，只需使用上述三種方法中的任何一種將其添加到您的 WordPress 網站即可。 祝你好運！

閱讀更多 WordPress LMS 網站的流行插件和主題