結局どのサイズ置いときゃいいんだよファビコン2015

以前はファビコンと言えば 16×16 の ico 画像作って設置しとけば良かったのですが、昨今のデバイスの多様化により iOS やら Android やら Windows8 やらで必要サイズが多すぎて、もうどこまで対応すりゃいいんだよう！となりがちです。

まあ最悪これだけあればいいんじゃないの

16×16 px（IE）
32×32 px（他のブラウザ）
48×48 px（Windows デスクトップ）
152×152 px（iOS・Androidホーム画面）

iOS や Andorid は OSのバージョンや端末によってたくさんのサイズバリエーションがありますが、現在 iOS で表示される最大サイズである 152×152 を入れとけば小さいものは自動で縮小されるので大丈夫かと思います。

あとは Windows8 のタイル用なんかがありますが、需要少なそうだし、専用の画像が無くても 48×48 が表示されるので、まあいいかとします。

とにかく細かくこだわればきりがないのですが、どこで妥協するかが大事だと思います。
今回は上記した4つのサイズで進めていきます。

画像作成手順

一番大きい画像だけ準備して、あとは自動変換サービスにまかせましょう。

Real Favicon Generator

「Select your Favicon picture」から画像アップロードです。
このサービスでは推奨サイズが 260 px となってますが、今回使用する最大サイズの 152 px あれば十分です。

画像ごとの詳細な設定画面になりますが、下にスクロールして「Generate your Favicons and HTML code」ボタンをクリック！

「Favicon package」ボタンを押すと画像一式がダウンロードされます。
解凍するとたくさん画像が入っていますが、今回使うのは
・favicon-16×16.png
・favicon-32×32.png
・android-chrome-48×48.png
・apple-touch-icon-152×152.png
だけです。

ダウンロードした画像をそのまま使っても良いのですが、あと一工夫することで画像とコードがスッキリできます。

マルチアイコン作成

.ico のアイコン形式には、複数のサイズの画像をひとつにまとめられる「マルチアイコン」という機能があります。

半透過マルチアイコンfavicon.icoを作ろう!

上記サイトで 16・32・48 px の画像をアップロードして「アイコン作成」ボタンをクリックすれば、マルチアイコンのできあがりです。

サイトに設置

アップロードする画像は
・favicon.ico（マルチアイコン）
・apple-touch-icon.png（apple-touch-icon-152×152.png リネーム）

上の2つの画像をサイトルートにアップしましょう。

あとは HTML の head 内に以下を記載すれば完成です。

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ファビコン沼に要注意

今回の手順を踏めば、ほとんどのデバイスに対して不都合がないファビコン環境が実現できるかと思います。

ただ、もしあなたがデザイナーなら、ここから先が要注意です。

大きい画像をリサイズしているので、16×16 や 32×32 のアイコンはどうしても画像の内容がつぶれてしまうことが多いです。
16×16 と 32×32 の画像を個別に作り直すでしょう。

また、世の中の美しいファビコンを参考にしているうちに、ドット職人の道に足を踏み入れる危険性があります。

iOS ではホームのアイコン画像に自動で光沢が入ります。
Andoroid でも同様にしたくて、光沢が入った Android 用の画像を作成したくなる可能性も高いです。

ふと、Windows8 のスタート画面を見ている時に「ここにピン留めされた時も格好良く表示したいな･･･」と思うかもしれません。

こうなると、せっかく最小限に留めたファビコン画像と、設置のコード行数が次々と増えて、いたずらに時間が過ぎていきます。

しかし、ファビコンにこだわるより、もっと大切なサイト改善作業があるはずです。
ファビコンに凝るのは、暇で死にそうな時にしましょう。

Share on Tumblr

Tweet