這裡介紹如何設定各種解析度的網站圖示檔 favicon.ico,讓各種平板與手機也可以正常顯示網站的 logo 圖示。

一個正式的網站都會有一個代表網站的 logo 圖示,把代表網站的圖示設定好,對於網站的形象建立會有很大的幫助,如果使用者看到一個網站沒有正確的顯示 logo 圖示,很直覺就會認為這個網站不夠專業,甚至懷疑網站的真實性。


以前傳統網站的圖示只有一種,就是 16×16 大小的 favicon.ico 圖示檔,顯示在瀏覽器的網址列,設定的方式很單純(可參考 WordPress 設定 Favicon 網站圖示的教學),不過現在除了瀏覽器本身會使用到網站圖示之外,桌上型電腦、手機或平板在建立網站的捷徑時也都會用到網站的圖示,不同的作業系統或裝置所使用圖示大小也都不同,所以在設定上也複雜許多。

由於目前各家作業系統對於網站圖示的標準不一,網路上有「各式各樣」的教學,每個人的作法都不同,其實我看了很久也不是很清楚到底應該怎麼設定比較好,以下是我個人的一些筆記給大家參考。

製作多解析度的 favicon.ico

一個 ico 圖示檔可以包含好幾種解析度的圖示,這個特點非常有用,因為我們只要在 <head> 中加上一行程式碼就可以支援好幾種不同解析度的圖示:

<link rel="shortcut icon" sizes="16x16 32x32 48x48 64x64" href="http://blog.gtwang.org/favicon.ico">

這樣的 favicon.ico 檔案中包含了好幾個不同解析度的圖檔,若要製作這樣的 ico 圖示檔,可以使用 GIMP 或是 ImageMagick 自動產生。

使用 GIMP

Step 1
首先自己設計好各種大小的圖示檔。

making-multi-resolution-favicons-in-gimp-1

各種大小的網站圖示

Step 2
使用 GIMP 開啟大小最大的那一個圖示。

making-multi-resolution-favicons-in-gimp-2

使用 GIMP 開啟圖示圖檔

Step 3
選擇「開啟成為圖層」。

making-multi-resolution-favicons-in-gimp-3

選擇「開啟成為圖層」

Step 4
選擇各種大小的圖示檔。

making-multi-resolution-favicons-in-gimp-4

選擇各種大小的圖示檔

Step 5
開啟之後,所有的圖示會疊在一起。

making-multi-resolution-favicons-in-gimp-5

各種大小的圖示檔

Step 6
選擇「Export As」匯出圖示。

making-multi-resolution-favicons-in-gimp-6

匯出圖示

Step 7
將匯出的圖示儲存為 favicon.ico

making-multi-resolution-favicons-in-gimp-7

匯出至 favicon.ico

Step 8
調整各個圖示的儲存設定。

making-multi-resolution-favicons-in-gimp-8

設定圖檔儲存格式

設定好之後,按下「匯出」即可產生包含各種大小的 favicon.ico 圖示檔了。