設定各種解析度大小的網站圖示 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 提供了非常詳細的說明，如果您想要把每一種圖示都補齊，可以詳細閱讀這裡的說明。

參考資料：the new code、Kirinyan、Scotch