Retinaディスプレイに対応できるマルチサイズのファビコンの作り方。

こんにちわ。夏休みの学生がうらやましくなんてないぞー、オレっち（@yashiki55）です。

オレっちのMacBook Proが世代交代を果たしまして、MacBook Pro Retinaディスプレイになったことで、毎日ウハウハ言いながら仕事をしておりますが、当然Retina対応していないサイトやソフトの方がまだ多いわけで、自分のサイトでもファビコンが特に汚い感じだったんですよ。

そもそもファビコンって上の画像のコレね。画像はマルチサイズのファビコンに変更した後だから見れるようになったんですが、それまでは「新」という字がぐちゃぐちゃ〜ってカンジになって読めなかったんですね。

あ、Retinaディスプレイ以外ではもちろん従来のままで大丈夫でしたよ。

これまでは16×16ピクセルだった

そう。16×16ピクセルのちっこい画像を超高解像度のRetinaディスプレイにぶち込んだら、そら潰れちまうよね。

そこで、サイズの大きなico形式の画像がいるわけだけど、Retina以外のブラウザでもきっちりと表示が出来るように16×16ピクセル画像も残したいんです。

ico形式のファイルは元々はWindowsのアイコン形式になるんですが、なんとコレ、種類が異なる解像度の画像をまとめて一つのファイルとして認識しよるんですね。すばらしい。

複数の解像度の異なる画像を同梱して一つのファイルとしてファビコンに設定することで、マルチサイズ対応として従来のブラウザでの通常表示をしつつ、Retinaディスプレイでの高解像度表示もしてくれるということになるんですよ。

ま、簡単にいうとRetinaディスプレイでも見れるように、おっきい画像とちっちゃい画像をひとつにしなはれ。ということでんな。

簡単に作成できるBradicon!にお世話になります。

しかし、その前にマルチサイズに同梱したい数種類の元画像を用意してください。オレっちはとりあえず、16×16、32×32、48×48の3種類のpng形式の画像を用意したよって。

16×16ピクセル

32×32ピクセル

48×48ピクセル

で改めてBradicon!のサイトに行きます。とてもシンプルな画面です。その中のBrowseボタンをクリックして先ほど用意した画像をそれぞれ用意しましょう。

なお、選ぶ時は用意した画像の中で大きいサイズのものから選びましょうね。

それぞれ画像を続けて選択し終えたら、リスト表示がされますので、やはり一番大きなサイズの画像をクリックします。

おう。出た。ふふふ（笑）

簡単やんけ。

作成できたico形式のファイルをプレビューで開いてみると、ばっちり3種類の画像が同梱されてますね。

あとは出来たico形式ファイルをファビコンとして設定するだけでごわすな。

めでたし。めでたし。