Favicon 圖示指的是一個網站的標示圖片,通常會顯示在瀏覽器網頁標題的開頭和書籤裡,類似於 APP 的圖示。 Favicon 圖示是一個網站的重要標示,可以幫助使用者識別出你的網站。

Favicon 原本是一個 16×16 畫素的正方形圖片,但是由於 Retina 螢幕的大量出現,現在一般使用一張 32×32 畫素的圖片來保證顯示效果。

如何給網站新增 Favicon 圖示

首先要使用 PS 或者一些生成軟體來製作一個屬於自己的 Favicon 圖示,然後把它命名為 favicon.ico 上傳到網站根目錄即可,瀏覽器檢測到圖示檔案的存在會自動使用。

在 WordPress 中設定 Favicon 圖示

雖然在 WordPress 中也可以使用上邊的方法為網站新增 Favicon 圖示,但是我並不推薦,因為 WordPress 提供了一種更為簡便的方法。

進入後臺的 「外觀」→「自定義」,開啟左側的 「站點身份」 欄目,可以看到 「站點圖示」 選項,在這裡點選 「選擇檔案」 即可上傳製作好的圖示:

(這裡的圖片應該儘量選擇 512×512 畫素及以上的,因為還會有別的用處,詳見下文) 。

選擇好圖片之後開始進行裁剪,在左邊選出圖片中想作為圖示的那一部分,然後在右邊預覽好效果之後就可以點選 「裁剪影像」 了:

在這之後,WordPress 會自動根據需要把圖片裁剪成幾份,然後儲存下來,裁剪可能會比較慢,需要耐心等待。

裁剪好之後點選 「儲存併發布」,就完成了設定:

去前臺重新整理一下頁面,是不是圖示已經出來了呢?

APP 圖示

在這裡上傳的圖片同樣會被用作 APP 圖示。在 iOS 系統的 Safari 中,使用新增到主螢幕功能將網站新增到主螢幕上,你會發現這個 「APP」 的圖示就是剛剛你設定的那個。