如何添加和更改 WordPress Favicon | WP愛好者
已發表: 2022-01-20人們使用 WordPress 為個人和企業創建網站。 幫助重複訪問者知道該網站是您的網站的一種方法是擁有一個自定義的 WordPress 網站圖標。
什麼是網站圖標?
favicon 是一個圖標,顯示在瀏覽器選項卡或窗口中,以及與特定站點相關的書籤或收藏夾列表中。 如果瀏覽器沒有找到自定義的網站圖標,它會顯示默認的網站圖標。
WordPress 網站圖標通常是網站徽標的一個小版本。 您可以將徽標縮小到圖標大小,但通常需要創建一個與原始徽標相關的徽標。

為什麼要使用 Favicon?
企業應該有一個網站圖標來提高熟悉度並鼓勵潛在客戶的信任。 品牌化允許訪問者立即識別網站。 它增加了連續性和合法性。
出於類似的原因,個人也可以使用網站圖標,但在大多數情況下,目標是重複訪問者而不是購買。
網站圖標規格
WordPress 中的圖標大小為 16×16 像素。 但是,其他一些瀏覽器和應用程序使用更大的尺寸,範圍從 16 到 195 像素正方形。
如果你堅持使用 16×16 尺寸,使用更大尺寸的應用程序通常會放大它,通常會導致像素化。 因此,WordPress 的站點標識需要 512×512。
一些常見的替代尺寸是:
- 24 像素 – Internet Explorer 9 中固定站點的圖標
- 72 像素 – iPad 主屏幕上的圖標
- 128 像素 – Chrome 網上應用店中使用的圖標
- 195 像素 – Opera Speed Dial 上顯示的圖標
網站圖標格式
如果網站圖標以不正確的格式保存,將無法正確顯示。 最常見的格式是 Windows ICO,這是最初的要求。 它可以容納各種尺寸和分辨率,以便在多個平台上使用。 它是 Internet Explorer 使用的唯一格式。
PNG 是對用戶最友好的選項,因為幾乎所有圖形程序都會以這種格式保存,並且它提供了較小的文件大小,並允許在需要時使 favicon 透明。
Opera 支持將 SVG 用於網站圖標,儘管它是唯一支持的瀏覽器。
GIF、JPG 和 APNG 是選項,但不太有用,因為它們的分辨率更差,而且它們可能會分散注意力。 動畫 GIF 文件和 APNG 文件尤其容易分散注意力,這些文件也是動畫的。
創建網站圖標
設計一個 WordPress 網站圖標來增加對您網站的識別度是一個好主意。 您可以在計算機上的圖形程序上設計一個或使用免費的在線網站,例如 favicon-generator.org 或 favicon.cc。

考慮以下因素來提高網站圖標的價值。
身份
擁有網站圖標的最重要原因是被認可。 創建代表您提供的產品或服務的設計或與您的品牌徽標相匹配的設計。 與您的品牌直接相關的圖像,例如較小版本的徽標或公司名稱的主要字母或字母,是理想的選擇。
簡單
由於它的體積小,最好是簡單。 基本形狀或字母是提高知名度的好選擇。 當訪客一眼認出它時,它是最有效的。 您嘗試包含的細節越多,訪問者就越難以識別圖標是什麼。 精確、大膽和清晰是必不可少的。
顏色
高對比度將提高可讀性並增加識別度。 考慮一下 NBC 和 Netflix 等網站的網站圖標。 他們的網站一目了然。 具有明確顏色標識的網站應在其 WordPress 圖標中包含該顏色。 再次,保持簡單。 太多顏色會導致圖像不清晰。
如何將 Favicon 添加到 WordPress
使用以下方法之一添加 WordPress 網站圖標:
1) 使用 WordPress 中的內置站點圖標選項。
將鼠標懸停在外觀上並選擇自定義,然後選擇站點身份選項卡。 站點圖標位於左側面板的底部,允許您選擇任何 512 像素或更大的方形圖像,然後根據需要調整大小。
如果您選擇的文件不是正方形,WordPress 會提供一個界面將圖像裁剪為正方形。

2)編輯header.php
在當前主題中編輯 header.php 文件並添加以下代碼:

<link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />
將“yourdomain”替換為您網站的域名,並確保將網站圖標上傳到網站空間。
如果您想阻止 WordPress 撤消更新中的更改,請在編輯之前創建子主題並編輯子主題文件而不是主主題文件。
3) 使用 WordPress 插件。
使用我們在下面列出的插件之一。
如何在 WordPress 中更改網站圖標
更改 WordPress favicon 類似於添加一個。 相同的方法可以上傳新的網站圖標。 也可以上傳新的並覆蓋舊的,當訪問者清除緩存或進行硬刷新時,舊的會改變它。
如果您發現過程令人困惑,請讓 WP Buffs 處理您的升級和更改。 該團隊全天候 24/7 提供服務和幫助。
使用 WordPress Favicon 插件進行簡化
通過安裝插件來簡化添加或更改 WordPress 網站圖標的過程。
- 您可以使用插件插入頁眉和頁腳輕鬆添加上面的代碼。 將代碼粘貼到標題部分並保存。
- 插件 All in One Favicon 添加了簡化添加 favicon 過程的功能。
- RealFaviconGenerator 是一個根據瀏覽器要求生成圖標的插件。
- 另一個流行的插件是 Heroic Favicon Generator,它可以從上傳的圖像或媒體庫中已有的圖像生成一個 favicon。 它使用拖放來上傳圖像文件。
為什麼我的 WordPress Favicon 沒有顯示?
網站圖標錯誤有幾個可能的原因,從用戶錯誤到瀏覽器特性。
緩存
當您的網站被緩存時,對圖標等元素的更改需要一段時間才能顯示出來。 您可以通過硬刷新 (Ctrl + F5) 或清除瀏覽器緩存來加快此過程。 如果這不能解決問題,請檢查網站圖標文件類型。 如果不是 .ico 文件,則可能與瀏覽器不兼容。
錯別字
如果代碼中有印刷錯誤,則網站圖標可能會出錯而不是顯示。 簡單的錯誤(例如缺少引號、斜杠或括號)會導致圖像混亂甚至整個網頁的錯誤。 仔細檢查代碼。
WordPress 網站圖標位置
文件參考也非常具體。 如果鏈接(href 引號內的部分)指向不存在的圖像,則網站圖標將不會顯示。 請小心上傳網站圖標文件並複制確切的鏈接。 最好的方法是使用 WordPress 中的媒體庫。
本地視圖
如果您在本地計算機上檢查顯示而不是加載 Internet 頁面,則不會顯示 WordPress 圖標,因為大多數瀏覽器不會在本地查找圖標。 檢查互聯網上的頁面以確保它向訪問者顯示。
錯誤的圖像類型
favicon 圖像的默認文件類型是 .ico(“image/ico”)。 當使用另一種文件類型時,例如 PNG 或 SVG,在使用編輯主題方法時必須在代碼中進行調整。 文件類型必須與圖像的文件類型匹配。 例如,PNG 文件應該顯示“image/png”而不是“image/ico”。
有關各種 WordPress 相關主題的更多信息,請訂閱 WPBuffs 時事通訊。
人們還問
如何將網站圖標添加到 WordPress?
添加 WordPress 網站圖標的最簡單方法是使用自定義的站點標識部分。 第二個最簡單的方法是使用插件。 您還可以通過編輯主題來手動添加網站圖標。
WordPress 中的網站圖標在哪裡?
圖標本身顯示在選項卡或窗口標題中。 它還顯示在書籤列表中。 該設置位於“自定義”部分的“外觀”下。 從那裡,單擊站點標識,左窗格底部的站點圖標是您上傳網站圖標的位置。
WordPress 網站圖標的大小是多少?
16×16 像素是默認大小,但如果使用站點標識方法,則圖像應為 512×512 像素。 該軟件會將圖像縮小到適合每個瀏覽器或設備的大小。
如何更改 WordPress 中的網站圖標?
您更改圖標的方式與添加圖標的方式相同。 要么去外觀 → 自定義 → 站點標識,在你的插件中更改它,或者上傳一個新的 favicon.ico 文件,覆蓋之前的文件。