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
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
繼續閱讀： 12
