如何在 WordPress 設定 Favicon 網站圖示?

這裡介紹如何在 WordPress 中設定網站的小圖示,幫助網站建立好的品牌形象。

一般的正式網站都會自己設計一個代表該網站的小圖示(favicon),這個圖示在使用者瀏覽網頁時,會出現在瀏覽器的網址會是標題列上,對於網站的形象有加分的作用。


gtwang-favicon-1

Step 1
首先設計自己的網站圖示,您可以使用 favicon.cc 自己畫一個,或是將一般的圖檔上傳至 favikon 來產生圖示。網路上也有許多免費的圖示可以下載。

Step 2
將製作好的圖示檔(檔名通常為 favicon.ico)上傳至網頁伺服器中,路徑可以自己調整,不過通常大家都會放在網站的根目錄,例如 http://blog.gtwang.org/favicon.ico

Step 3
在 WordPress 管理介面中,選擇「Appearance」的「Editor」,編輯 header.php 這個 PHP 檔案,在 <head></head> 之間加上一行:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

其中 href="/favicon.ico" 就是您的網站圖示路徑,如果您的檔名或是路徑不同,請自行更改。

wordpress-add-favicon-1

另外,如果您所使用的圖示檔案不是 ico 檔(例如 png 或是 gif),那麼除了副檔名要改變之外,type 也要修改一下,以下是一些範例:

png 檔:

<link rel="icon" type="image/png" href="http://example.gtwang.org/png-favicon.png" />

jpeg 檔:

<link rel="icon" type="image/jpeg" href="/jpeg-favicon.jpg" />

gif 檔:

<link rel="icon" type="image/gif" href="/gif-favicon.gif" />

如果不想要手動修改 HTML 程式碼,也可以試試看從 WordPress 的 plugins 中搜尋 favicon,找一些 plugins 來用,不過我個人是比較喜歡直接改 HTML,這樣比較不用裝太多 plugins。

WordPress, 網頁開發

3 Comments

  1. Jetpack 擴展可以讓 WordPress 有一個相應的設定項。

  2. Dabinn

    謝謝分享~

Leave a Reply