這裡介紹如何設定各種解析度的網站圖示檔 favicon.ico，讓各種平板與手機也可以正常顯示網站的 logo 圖示。
一個正式的網站都會有一個代表網站的 logo 圖示，把代表網站的圖示設定好，對於網站的形象建立會有很大的幫助，如果使用者看到一個網站沒有正確的顯示 logo 圖示，很直覺就會認為這個網站不夠專業，甚至懷疑網站的真實性。
以前傳統網站的圖示只有一種，就是 16x16 大小的 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
首先自己設計好各種大小的圖示檔。
Step 2
使用 GIMP 開啟大小最大的那一個圖示。
Step 3
選擇「開啟成為圖層」。
Step 4
選擇各種大小的圖示檔。
Step 5
開啟之後，所有的圖示會疊在一起。
Step 6
選擇「Export As」匯出圖示。
Step 7
將匯出的圖示儲存為 favicon.ico。
Step 8
調整各個圖示的儲存設定。
設定好之後，按下「匯出」即可產生包含各種大小的 favicon.ico 圖示檔了。
ImageMagick
如果不想使用 GIMP 手動編輯圖示，我們也可以利用 ImageMagick 的 convert 來自動產生包含各種大小的圖示檔。首先安裝 ImageMagick，Debian 系列的 Linux 可用 apt 安裝：
sudo apt-get install imagemagick
如果是 Windows 的使用者，可以從 ImageMagick 的官方網站上下載打包好的安裝檔來使用。
接著製作一個高解析度的圖示檔作為母圖，然後用 convert 轉換成各種大小的圖示檔：
convert source.png -resize 64x64 favicon-64.png
如果想要將圖示中的特定顏色轉為透明，可以加上 -transparent 參數，例如：
convert source.png -resize 64x64 -transparent white favicon-64.png
產生好各種大小的圖示檔案之後，再將所有的圖示檔合併變成一個 favicon.ico 檔，例如：
convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico
這樣就產生了一個包含各種圖示大小的 favicon.ico 了。
Windows、Android 與 iOS 使用的圖示
favicon.ico 可以提供一般的瀏覽器使用，而 Windows、Android 與 iOS 等系統會使用一些特定大小的圖示，而這些圖示的標準非常雜亂，建議可以使用 Real Favicon Generator.net 這個測試工具來輔助，測試看看自己的網站缺少哪些大小的圖示，再把缺少的圖示依照指示補上去。
Real Favicon Generator.net 的測試報告會顯示網站在瀏覽器與各種作業系統中所顯示的圖示，而下方還有非常詳細的分析與說明，我們可以依照這裡的建議，加上必要的圖示。以下這是一個範例：
<link rel="shortcut icon" sizes="16x16 32x32 48x48 64x64" href="http://blog.gtwang.org/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<meta name="application-name" content="GTWang GTWang gtwang">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-TileColor" content="#3498df">
這個範例只是提供大家一個參考而已，並沒有把所有的圖示大小都加入進來，因為所有的圖示大小實在是太多了，也沒有一個統一的標準，所以就放一些自己覺得比較重要的。
另外 Real Favicon Generator.net 的 FAQ 提供了非常詳細的說明，如果您想要把每一種圖示都補齊，可以詳細閱讀這裡的說明。