faviconやらウェブクリップアイコンを作るためのあれやこれや

2012/06/21 19:57

最近はウェブクリップアイコンなんてのもあるのよ

　そういえば、前に「最近の若いもんはスマホのホーム画面にブックマーク置くんだぜ」なんていう都市伝説を耳にしたことがあります。それがホントかどうか知りませんが、たしかにそういう使い方もありますね。デフォルトで入ってるアイコンをタップしたらアプリじゃなくてブックマークだった、なんてこともありますし。

　ちなみにホーム画面に置かれたブックマークは「ウェブクリップ」というらしいです。(もうブックマークで良いじゃん。)
　最近はみんなスマホ持ってるので、ウェブクリップアイコンを設定しておくのはfaviconを設定しておくのと同じくらい重要かも。(もういっそ、faviconとウェブクリップアイコン統一してくれないかな……)

ウェブクリップアイコンの名前とか設定とか

　iOSの場合、特に指定がなければ、ルートディレクトリにある「apple-touch-icon.png」または「apple-touch-icon-precomposed.png」を探して、ウェブクリップアイコンとして取得します。(Androidは特にそういうことはないみたいです。)
　明示的にファイルを指定したい場合は、HTMLに以下のように書きます。

<link rel="apple-touch-icon" href="http://www.example.com/icon.png" />

　このウェブクリップアイコンの設定に関しても、OSやら機種やらでいろいろ違いがあるみたいです。
　その辺は以下ページが詳しいかと思われます。

iPhone と Android の apple-touch-icon の違い – Fonland

ってことで

　なんのかんのまとめると、iOS端末に対応するなら57×57、72×72、114×114の3種類を用意しておけば間違いない、と。
　ただ、Android端末は分からんので、でかいサイズを用意しておいて、あとは端末がリサイズするに任せれば良いじゃない、というのが個人的な答えです。

まとめ

　そんなこんなを考え合わせて、現在は以下のような画像を設定しています。

16×16ピクセルのfavicon用ICOファイル
256×256ピクセルのウェブクリップ用PNGファイル

　製作や管理がめんどくさいので、ICOに複数の画像を格納したり、複数の画像を端末に合わせて表示させたり、といったことはしていません。

　faviconは、256×256ピクセルを用意して、あとはブラウザのリサイズに任せる事も考えたのですが、256×256を16×16に単純にリサイズするとさすがに画像が潰れ過ぎてなんだか分からなくなりそうだったので、一番利用される頻度の高い16×16だけを作成しました。(16×16レベルは同じ画像でも32×32以上とは違う世界だと思う。)

　ウェブクリップに関しては、256×256を52×52までリサイズして表示してもあんま変わらんだろう、と考えて、256×256ピクセルだけ作成しました。114×114でも良いと思いますが、なんとなく256のほうがキリが良かったので。(128でも良かったか。)