ググって調べてみると、以下のようにそれぞれ対応サイズがあるようです。。。
いつの間にこんなにふえたんだろう。。。
サイズ（px） 使用箇所
16×16 お気に入り、タブ、IEのアドレスバー・ピン留めサイトなど
24×24 ピン留めサイトのブラウザUI
32×32 IEの新しいタブとタスクバーボタン
48×48 Windowsのサイトアイコン
64×64 高解像度デバイスでのWindowsのサイトアイコン
57×57 iOSのホームアイコン
72×72 iPadのホームアイコン
96×96 GoogleTVのアイコン
114×114 RetinaディスプレイのiPhoneのアイコン
128×128 Chrome ウェブストアのアイコン
144×144 IE10 Metroのピン留めサイトアイコン
152×152 RetinaディスプレイのiPadのアイコン
195×195 Operaスピードダイヤルのアイコン
228×228 OperaのiPad向けブラウザ「Coast」のアイコン
結構あるもんですね〜。
どれに合わせるのか悩みましたが、一個のアイコンファイルで、それぞれ対応した大きさの画像を表示してくれるアイコンファイルを生成してくれるサイトがありました。
http://ao-system.net/alphaicon/
どうも８個(８種類)までのようなので、今回は「16 32 152 128 114 72 57 24」の８種類にしました。
まあ、８種類も対応すれば、十分な気がしますが、ファイルのフォーマットとか作り方は、ちょっと知りたい気がするので、後で、調べて、全サイズ対応とか作ってみるかもしれません。
後は、ファイルをアップロードして、タグの直後あたりに以下のコードを入れるだけですね。※「っっっ」の部分は各サイトのドメインにいれかえてください。
<link rel="shortcut icon" href="http://っっっ/favicon.ico" type="image/vnd.microsoft.icon"> <link rel="icon" href="http://っっっ/favicon.ico" type="image/vnd.microsoft.icon"> <link rel="apple-touch-icon" href="http://っっっ/favicon.ico">
