Favicon 通常被稱為瀏覽器選項卡中顯示在網站名稱旁邊的小圖示。然而,雖然那是它們的起源,但您的WordPress網站圖示也用於其他地方,例如瀏覽器書籤、iOS主螢幕按鈕等。
因此,它是您品牌的重要組成部分。如果使用得當,您的網站圖示或“站點圖示”可以幫助使用者輕鬆識別您的業務。它可以幫助提高品牌知名度,甚至可以增強網站的使用者體驗 (UX)。
在本文中,我們將討論在WordPress站點中使用網站圖示的好處。然後我們將解釋如何建立一個,並引導您完成將其新增到您的站點的三個簡單選項。
最後,我們將用一些 WordPress 網站圖示提示和最佳實踐來總結它。讓我們開始吧!
使用WordPress網址圖示的好處
如果您曾經同時開啟過多的標籤頁(有罪!),您可能會體會到收藏夾圖示的用處。當使用者在瀏覽器中開啟多個選項卡時,網站圖示可讓使用者輕鬆快速識別您的網站:
Chrome瀏覽器中的閃電博圖示
根據開啟選項卡的數量,您網站的標題可能並不總是可見。因此,新增網站圖示有助於改善訪問者的使用者體驗。
除了提高品牌知名度,使用WordPress網址圖示還可以讓您的網站看起來更專業和可信。反過來,這有助於提高客戶的信任度。
此外,如果有人將您的網站儲存到其移動裝置的主螢幕,您的網站圖示將顯示為圖示。使用您的品牌徽標或類似影象有助於使您的網站更易於識別,並有助於整體營造有凝聚力的美感。
如何建立WordPress網站網址圖示
如果您已經有一個可以使用的網站圖示(大多數企業使用他們的徽標或其變體),請隨時跳到下一部分。否則,讓我們看看如何建立您的網站圖示圖片。
過去,您必須為您的網站圖示使用特定的ICO檔案。但是,如今,所有現代瀏覽器都支援將ICO、PNG和GIF檔案用於您的收藏夾圖示。JPEG也得到廣泛支援,但並非在所有Internet Explorer版本中都得到支援,這使得它不太適合使用收藏夾圖示。
如果您熟悉Photoshop,則可以使用它來手動建立網站圖示。但是,使用基於雲的基本工具從現有影象建立收藏夾圖示集通常更容易。
RealFaviconGenerator (我們稍後將討論的基於雲的外掛版本)是一個很好的選擇,因為:
- 它還建立應用程式圖示。
- 它提供了PNG和ICO格式的網站圖示。
- 您可以在上傳圖片後自定義您的網站圖示。
- 您需要做的就是貼上外掛提供給您的程式碼。
其他有用的圖示生成器是:
- Favicon.cc,可讓您從頭開始建立網站圖示或上傳現有影象。
- Favicon Generator,其功能類似於RealFaviconGenerator。
要使用RealFaviconGenerator,首先通過單擊Select your Favicon image上傳您要使用的影象:
在RealFaviconGenerator上上傳網站圖示源影象
在下一個螢幕上,您可以配置有關您的收藏夾圖示集的特定詳細資訊(如果需要)。完成後,滾動到底部並單擊Generate your Favicon and HTML code:
RealFaviconGenerator上的網址圖示生成器設定介面
在下一頁上,單擊Favicon package下載您的favicon圖片:
下載Favicon包介面
如果您打算手動將網站圖示新增到您的網站,請確保讓此頁面保持開啟狀態。
建立WordPress網址圖示的技巧
在建立收藏夾圖示之前,有一些設計和格式提示值得一提和審查。最重要的是,推薦的圖示大小為512×512畫素。
雖然您的WordPress圖示將是一個完美的正方形,但您也可以使用矩形影象並在將其上傳到WordPress之前或之後對其進行裁剪。如果您通過定製器新增站點圖示,WordPress帶有內建的站點圖示裁剪功能(我們將很快引導您完成)。
此外,請務必注意,您的網站圖示將顯示為 16×16 畫素的正方形。因此,您希望選擇縮小到這些尺寸後看起來不錯的影象。儘管它將以該尺寸顯示,但它的高度和寬度仍應至少為 512 畫素。
最後,檢視一些有關 建立和使用網站圖示的Google指南是一個明智的主意。這將有助於確保您的圖示在搜尋引擎和瀏覽器選項卡中以最佳方式顯示。
如何將網址圖示新增到WordPress網站
擁有收藏夾圖示後,您就可以將其新增到您的 WordPress 網站了。讓我們來看看您可以使用的三種方法。
1. 使用WordPress定製器上傳您的網站圖示
從WordPress 4.3開始,所有WordPress站點都包含站點圖示功能,可以輕鬆上傳和裁剪影象以用作收藏夾圖示。對於大多數使用者來說,這是將網站圖示新增到WordPress的最簡單、最快捷的方法。
您只需要一張至少512×512畫素的影象。WordPress將處理剩下的過程。要開始,請轉到WordPress儀表盤中的外觀 →自定義:
WordPress中的外觀選單
從那裡,導航到站點身份選項卡:
WordPress定製器中的“站點身份”選項
接下來,檢視站點圖示部分的底部,然後單擊選擇站點圖示按鈕:
WordPress定製器中的“選擇站點圖示”按鈕
正常的WordPress媒體庫介面將開啟。您可以選擇媒體庫中的現有影象或上傳新影象。如果您使用RealFaviconGenerator建立您的網站圖示,請確保您下載的包已解壓縮。
一旦你有你喜歡的圖片,單擊它並選擇選擇在右下角:
在WordPress中選擇您的網站圖示影象
如果您的影象還不是一個完美的正方形(例如 512×512 畫素),WordPress會給您一個在下一個螢幕上裁剪它的機會。
使用該框突出顯示要用作圖示的影象部分。您可以在介面右側預覽裁剪後的影象的外觀。
一旦您對外觀感到滿意,請單擊“裁剪影象” 以完成您的選擇:
在WordPress中裁剪您的網站圖示影象
就是這樣!您需要做的就是選擇“儲存併發布” 以使您的網站圖示生效。如果您以後想更改您的收藏夾圖示,您可以返回此介面。
2. 安裝外掛以新增WordPress網站圖示
如果您更喜歡本機WordPress站點圖示功能的外掛解決方案,您可以使用免費外掛Favicon by RealFaviconGenerator (我們之前討論過的基於雲的工具)。
該外掛與原生WordPress定製器一樣易於使用。但是,它為各種裝置和應用程式圖示提供了額外的相容性選項。要使用它,請通過您的WordPress儀表板安裝並啟用免費外掛:
WordPress外掛-Favicon by RealFaviconGenerator
啟用外掛後,轉到外觀 → Favicon以建立您的Favicon集。您需要做的就是選擇或上傳至少70×70畫素(最好是260×260畫素)的影象:
使用外掛在WordPress中新增收藏夾圖示介面
選擇影象後,單擊Generate favicon。當您選擇該按鈕時,該外掛會將您從WordPress網站帶到RealFaviconGenerator網站。
在站點底部,向下滾動以選擇Generate your Favicons and HTML code (請參閱上一節)。當該工具工作時,Real Favicon Generator會將您傳送回您的WordPress儀表盤:
預覽WordPress網站圖示顯示方式的介面
之後,您的網站圖示將被設定並準備就緒。您可以在外掛介面中檢視它在不同裝置上的外觀預覽。
3. 通過FTP手動新增您的Favicon
如果您更喜歡手動操作,如果您的主機使用cPanel,則可以通過檔案傳輸協議 (FTP)或檔案管理器向您的WordPress站點新增圖示。
如果您使用這種方法,您還需要建立自己的網站圖示影象。您可以按照我們在本文前面概述的步驟來做到這一點。
對於本演示,我們將使用我們從RealFaviconGenerator建立和下載的包,即使您使用不同的工具來建立網站圖示,這些說明也適用。
要將WordPress網站圖示手動新增到您的網站,您需要:
- 通過FTP客戶端或託管cPanel中的檔案管理器訪問您站點的檔案。
- 找到您網站的根目錄並上傳您的網站圖示包的內容 ( favicons.zip )
這些檔案應該與wp-admin和wp-content資料夾位於同一資料夾中。接下來,使用RealFaviconGenerator之前為您提供的程式碼,或者:
- 使用插入頁首和頁尾等外掛 將其新增到主題的頁首。
- 通過編輯主題的header.php檔案,將其直接貼上到主題的<head>部分。
使用插入頁首和頁尾外掛是最佳選擇,因為它可以確保您在以後更改WordPress主題時不會丟失您的網站圖示。
為此,請安裝並啟用插入頁首和頁尾。然後轉到Settings → Insert Headers and Footers,並將您的程式碼貼上到Scripts in Header 部分:
使用插入頁首和頁尾外掛新增網站圖示程式碼
確保儲存您的更改。那你就大功告成了!
使用WordPress網站圖示的其他提示
如果您希望多站點網路中的每個站點 都有一個獨特的網站圖示,實現這一目標的最簡單方法是使用像上面提到的那樣的網站圖示外掛。雖然可以編輯您的主題檔案來為每個網站啟用獨特的網站圖示,但該過程比使用外掛要複雜得多。
您還可以考慮使用內容交付網路 (CDN) 來提供您的網站圖示影象。我們在這篇文章中討論的三種方法都將您的網站圖示影象儲存在您的伺服器上。但是,您可以通過使用CDN來提供這些影象來進一步優化您的站點。
當您安裝Cloudflare 或KeyCDN之類的服務時,訪問者的瀏覽器將從您的CDN而不是您站點的伺服器載入您的網站圖示。如果您使用像CDN Enabler這樣的外掛,它應該會自動重寫您的WordPress網站圖示URL以使用上述方法。
小結
WordPress網站圖示可以幫助提高您的品牌知名度並改善網站訪問者的使用者體驗。幸運的是,您有多種選擇可供選擇,這使得新增一個變得簡單。
可用於向網站新增WordPress網站圖示的三種主要方法是:
- 使用 WordPress 定製器上傳站點圖示。
- 安裝外掛,例如 RealFaviconGenerator 的 Favicon。
- 通過 FTP 客戶端或檔案管理器手動新增網站圖示。
評論留言