線上快速生成網址圖示favicon

經常發現閃電博的主題或者外掛使用者的網站不設定網址圖示favicon。當然這個網址圖示也不是非有不可，只是有這個網址圖示favicon，可以讓你的網站更加完整，在你的網站品牌打造上起到一定的作用。下面由小編來簡單地介紹一下這個網址圖示favicon、網址圖示的作用及如何設定網址圖示。

什麼是favicon

Favicon是favorites icon的縮寫，中文一般稱為網址圖示、網頁圖示、頁面圖示及URL圖示，小編更喜歡稱它為網址圖示。這個Favicon最早只是應用於瀏覽器的收藏夾，但現在除了在收藏夾中展示收藏的URL地址對應的favicon外，還會在瀏覽器的頁面標籤上展示當前頁面的favicon。如下圖所示：

Chrome瀏覽器上的網址收藏夾及標籤頁

網址圖示的作用

網址圖示對網站功能、網站外觀等是沒有任何影響的。通過上述的favicon介紹，我們知道這個favicon僅面向客戶端，在客戶訪問你的網站時，在瀏覽器端展示。

那麼是不是這個favicon可有可無？那也不能夠這樣理解，給網站增加favicon有以下好處：

（1）方便使用者在瀏覽器端快速定位到你的網站，畢竟視覺感官往往比文字閱讀直觀很多；

（2）其二，favicon一般與網站Logo相呼應，在瀏覽器端展示你的網站favicon，在一定程度上可以增加你的網站品牌知名度。

如何設定網址圖示

首先你的網站得有個正方形的Logo，並且這個Logo應該能夠讓訪客第一反應——知道這個Logo屬於哪個網站的。個人建議：

直接取材於你的網站Logo，這樣經常訪問你的網站的使用者能夠從中讀取到資訊；
這個Logo的配色儘可能與你的網站主色調或者Logo色調保持一致；
Logo儘可能精簡，簡單的圖形、單個字母或者漢字即可。

然後，我們需要將這個正方形Logo轉化成favicon圖示，這可以藉助一些線上工具快速生成favicon。個人牆裂推薦：favicon-generator。

訪問favicon線上生成工具網站favicon-generator.org，點選Choose File上傳你提前準備的正方形Logo，然後點選Create Favicon；

，上傳及生成favicon

跳轉頁面後，點選Download the generated favicon，將生成的各種規格的favicon的壓縮包下載至本地。

下載favicon網址圖示至本地

開啟壓縮包，選擇favicon的任何一個尺寸（16*16,32*32或者96*96），推薦使用32*32px尺寸。我們還可以看到該工具還可以生成各種應用程式的ico。

將生成的favicon上傳至你的網站根目錄，並在你的主題header.php新增對應尺寸的網址圖示程式碼，如下：

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

如果你使用的主題支援直接上傳favicon（閃電博的主題是支援該功能的），則直接在WordPress儀表盤後臺上傳即可，無需手動新增程式碼。