favicon example

在 WordPress 添加 Favicon

無論你是自架網站採用 WordPress 的平臺,還是本來就是 WordPress 的用戶 ,應該都會想要爲自己的 Blog 添加一個 Favicon(小圖)。Favicon 就是瀏覽器顯示網站名稱旁邊顯示的小圖(可參考本篇文章特定圖片裏紅圈所指的地方),像很多大公司大網站都會有自定的小圖,那樣訪客除了會記住網站名稱以外,也很容易把網站的 Logo 一併記住,長遠來說是很有宣傳效果的。

 

原本筆者也以爲添加這個小圖需要很多步驟,但發現比想像的簡單得多。如筆者在前幾篇有提起過,筆者不是什麼編程專業的,對於代碼這種東西也只是一知半解,大概看得懂而已,所以在這裏筆者也會儘量解釋清楚,讓不太會編程的人都能明白。

 

C$1.99 .Com at GoDaddy.com!

 

爲自己的 WordPress 添加 Favicon 需要以下三個步驟:

  1. 自己設計的網站 Logo:不知道各位是怎樣的,但筆者在開一日一題溫哥華之前,已經設計好 Logo,所以這個步驟沒有耽擱很久。小圖的設計隨自己喜歡,用什麼軟件也無所謂,但有兩點要做好,就是把圖片的大小設置爲 16 x 16 像素(pixel),然後把圖片另存爲 .ico 格式(format).
  2. 將圖片上傳到網上:一般會把小圖的檔案放到網站的根目錄,也就會獲取到圖片地址 http://(網域名)/(檔案名).ico。當然如果你不介意的話,放在其他目錄文件夾都可以,只要記下正確的圖片地址就好了。
  3. 複製以下代碼到 header.php 裏:登入 WordPress 後臺(Dashboard),進入外觀(Appearance)裏的編輯器(Editor),選擇 header.php,然後在 <head> 與 </head>之間插入這段代碼。代碼中間的鏈接就是上一個步驟獲取的 Favicon 的圖片地址。在這裏也說一下,筆者第一次插入這段代碼之前,雖然在 <head> 與 </head> 之間,但顯示不出來,於是筆者把它放到 <meta….> 的前面,一日一題溫哥華的小圖就出來了。大家也可以試試,看看插在哪裏能顯示出來,但在 <head> 裏面是肯定的。
<link rel="icon" href="http://(網域名 domain name)/(檔案名 file name).ico" type="image/x-icon">
<link rel="shortcut icon" href="http://(網域名 domain name)/(檔案名 file name).ico" type="image/x-icon">
<link rel="Bookmark" href="http://(網域名 domain name)/(檔案名 file name).ico" />

 

補充一下,其實有些外掛(plugin)也可以幫助 WordPress 用戶添加 Favicon 的,但是這樣載入的時候,小圖很難第一時間跟隨網站內容顯示出來,所以筆者還是建議各位在 header.php 裏加代碼,又不佔空間,效果又好。

 

 

如果想要知道更多關於筆者改善網站外觀的文章,可以到架網經歷看看!