こんにちは！
ゴーリストメディアチームです。
今回は、簡単そうで意外と最新情報が少ないfaviconの作り方について、注意点などまとめてみました。
どのサイズで作るかや、制作に使用するツールなど、これまで培った我ながらの制作の方法になりますが、ぜひ参考にしてみてください！
そもそも、faviconとは？
favicon＝Favarite iconの略で、ブラウザのアドレスバーやタブに表示される小さいアイコンのことです。
フォーマットについて
・16pxを含め、もっと大きいサイズの画像も欲しい
と言う理由から、ICO形式にしています。
サイズについて
ICOに含める画像サイズについては、以下のサイトを参考にしました。
（参考）Create a favicon for your site in 8 steps
http://www.creativebloq.com/illustrator/create-perfect-favicon-12112760
（参考）［ iOS7～］apple-touch-icon（Webクリップアイコン）のサイズ
http://aoicotori.hatenablog.com/entry/apple-touch-icon
ただ、一部のサイズについて実際に使用されているサイズと違うようだったので、分かる範囲で調べてみました。
以下、各サイズ（16px、24px、32px、57px、72px、96px、114px、128px、195px、256px）
の画像を含んだICO形式ファイルをfaviconに指定して、表示された結果です。
16px：IEではこちらで表示されました。（IE／windows）
32px：現在では多くのブラウザで32pxが使わているようです。
（chrome、firefox、safari/mac(osX 10.9.3) chrome/iphone5(ios7) chrome、firefox/windows8）
96px：トップページのブックマーク(safari/ipad第二世代）
128px：トップページのブックマーク(safari/iphone5 ios7）
256px：ホーム画面アイコン(iphone5(ios7)、ipad第二世代(ios7)
どうやら、タブに表示される、所謂faviconについては、32pxが主流になっている模様。
Retina対応で16pxの倍になったということでしょうか。
apple製品もRetinaに対応してか、ホーム画面のアイコンは256pxが使われているようです。
※弊社の環境でテストした結果ですので、全ての環境で同じ結果になるかは保証しません。
あくまで、参考としてご確認ください。2014年6月6日現在
制作方法
png画像等をICO形式に変換するwebツールも多数あるかと思いますが、
含める画像サイズが限定されているものしか見つからなかったため、弊社ではillustrator＆GIMPを使用しています。
関係無いですが、GIMP結構好きです。
「色を透明度に」とか、このICO形式への出力とか、photoshopにはないところをカバーするのが心憎いです。
１．illustrator
アートボードサイズ32px（chrome等の主要ブラウザで使われているため）で、表示をピクセルプレビューで作成。
web用に保存＞PNG-24、で対応が必要な各サイズに保存。
２．GIMP
一番大きいサイズの画像を開いて、それ以外のサイズも「レイヤーとして開く」で追加していく。（レイヤーパネルにドラッグ＆ドロップでOK）
ファイル＞Export asで、名前の欄に「ファイル名.ico」とファイル形式をicoにしてしまう。
※ファイル形式の選択にはicoが出てこないので、名前を無理やり変更する感じで。
「画像をエクスポート：Windowsアイコン」ダイアログが出るので、各サイズの詳細（bpp、bit、色、圧縮）を決める。
エクスポート。
以上でfaviconファイルの完成です。
３．指定方法
指定方法には以下２通りあるらしいです。両方指定するのが望ましいそうです。
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico”>
■apple-touch-icon
<link rel="apple-touch-icon" href="favicon.ico”>
以上で、faviconの設定まで完了です。
実際に作成・設定する人以外には、かなり、どうでもいい記事ですね。。
ただ、弊社で作成する際に情報が少なくてハマったので、誰かのお役に立てれば幸いです。
以上、Goalistメディアチームよりお届けしました！
（参考）もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ
