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

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

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


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" 就是您的網站圖示路徑,如果您的檔名或是路徑不同,請自行更改。

另外,如果您所使用的圖示檔案不是 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。

G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

2 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

2 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

3 年 ago