這裡介紹如何設定各種解析度的網站圖示檔 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 自動產生。
Step 1
首先自己設計好各種大小的圖示檔。
Step 2
使用 GIMP 開啟大小最大的那一個圖示。
Step 3
選擇「開啟成為圖層」。
Step 4
選擇各種大小的圖示檔。
Step 5
開啟之後，所有的圖示會疊在一起。
Step 6
選擇「Export As」匯出圖示。
Step 7
將匯出的圖示儲存為 favicon.ico。
Step 8
調整各個圖示的儲存設定。
設定好之後，按下「匯出」即可產生包含各種大小的 favicon.ico 圖示檔了。
Page: 1 2
