（多分）正しい favicon.ico と apple-touch-icon.png の作り方

↑今回作成したアイコンです。小さいサイズで表示することを考えるとシンプルになること多々・・それはそれでいいんですけどネ。自己流なんですが、favicon.ico と apple-touch-icon.png の作り方をまとめてみました。

１．apple-touch-icon.png

タブレットPCやスマートフォン用になります。ファイル名どうりアップルが策定したんですけど、じゃあ Android だとどうなるのだろう・・？ 持ってないので判りません・・

とりあえずサイズです。初期だと57pxってアップルの説明でしたが、実際には60pxだったらしく、57pxで作ってたアイコンは60pxに引き伸ばされてぼやけてる、なんてことがあったらしいです。

まあどのデバイスもデバイスでのアイコンサイズへリサイズしてくれる仕様なので、大きめの画像にしておけばOKですので、（現時点では）一番大きい iPad Retina 仕様に合わせることになるのでしょう。正方形なので 144 x 144ピクセル でOK。スマホでしか取り扱わないファイルになりますので、PNG 24bit でも 8bit でもどちらでも良し。

※ 追記
iOS7から 152 x 152 のサイズが登場しましたので、152pxで作成するのが現在は良いようです。

２．favicon.ico

Windows や MAC 用になります。私が採用しているのはマルチアイコンで、１ファイルで３パターンのサイズ別画像が組み込むことができるやつです。作るサイズは下記のとおり。

• 48 x 48 ピクセル
• 32 x 32 ピクセル
• 16 x 16 ピクセル

apple-touch-icon.png で作った144ピクセルの画像を使い回して、この３パターンの解像度で書き出すと早いです。16ピクセルの場合にディティールが潰れないかどうかを先に確認しておくと、手戻りがなくて良いです。.ico への変換については、ソフトを導入してもいいんですが、面倒だったのでオンラインツールで作成しています。

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。｜エーオーシステム

透過アイコンも可能で、プレビューまで作成してくれるのでなかなか有難いです。下記は今回の画像で作成した場合のプレビュー画像。

HTMLでの記述

相対パスとかめんどいことこの上ないのでルートから指定できるならそっちにしちゃいます。

favicon.ico の指定が１～２行目と複数ですが、１行目は IE6 の名残です。rel 属性にはひとつしか指定できないというW3Cのルールを破っているのですが、IE6 では「rel=”shortcut icon”」と記述しなければ favicon が表示できない仕様でしたので、１行目でIE6用に指定し、２行目でモダンブラウザ用に指定しておこう、という流れが一時期ありました。

今頃 IE6 対応も無いよなーと思うので正直１行目はもう書かず、２行目だけでいいかなと思っている次第です。

しかしファビコン、アップルタッチアイコンは見積もりにどう書けばいいんでしょうね、トップページ・全体デザインに含めるといいのでしょうか、それなりに手間な作業なので、ちょっともんもんします。