今回は、favicon 作成に関するメモです。絶対すぐ忘れてしまいそうなので、メモメモ。
favicon って結構情報が少ないというかパラパラという感じで、自分もなんとなくの知識で、16×16 と 32×32 の ico ファイルを作って、<link rel="shortcut icon" ~> なんちゃらと書いたら、それで割と普通に表示されてしまったので、それ以降調べることはありませんでした。
今回、favicon に関して凄い情報量の記事「ファビコン・カンニング・ペーパー」を読んだので、自分のサイトの favicon を見直して再作成しました。なので、その作業手順を書いておきます。
ico ファイル作成
さっそく、ico ファイルを作成します。件の記事を見ると、16×16、32×32、48×48 のサイズを作成すれば十分ということです。
ico ファイルを作成するには、ImageMagick というものを利用するのが便利なようです。Mac 用の ImageMagick のインストーラーがありましたので、それを使ってインストールしました。
ImageMagick のサイトに favicon を作るための方法が書いてありましたので、それを参考にします。例では、64×64 の画像も作成するようになっていますが、今回は必要ないのでその部分は削除します。
元になる画像ファイル（今回は img.png）を用意したら、Terminal を起動して img.png の場所まで移動します。
移動が完了したら、Terminal に以下のコードを貼り付けて実行します。
convert img.png -bordercolor white -border 0 \( -clone 0 -resize 16x16 \) \( -clone 0 -resize 32x32 \) \( -clone 0 -resize 48x48 \) -delete 0 -alpha off -colors 256 favicon.icoそうすると、img.png と同じ場所に、favicon.ico が生成されます。
iOS や Android 対応の ico ファイル作成
iOS や Android に対応するには、また別の favicon を作らなければいけないようです。各種デバイスに完璧に対応するには、物凄い数の favicon を作らなければいけないようですが、そこまでやる気はないので、簡単に対応できる方法を取りました。
サイトによると、152×152 の favicon-152.png を作成すれば、デバイス側でうまいこと縮小してくれるようです。ということなので、152×152 の favicon を作ります。先ほどと同様に、ImageMagick を利用するので、元の画像を用意して、Terminal に以下のコードを貼り付けて実行します。
convert -resize 152x152 img.png favicon-152.pngこれで、152×152 のサイズの favicon-152.png が生成されます。
ico ファイル設置
生成された favicon の置き場所についてです。今までは ico ファイルをサイト内の img ディレクトリに設置して、HTML で指定していました。
今回参考にさせていただいたサイトには、favicon.ico は HTMLでは特に指定しないのが望ましい、そして、ドメインのルートに置くだけ良いとありました。はー、それは知らなかった。
そして、先ほど作成した iOS と Android 用の favicon-152.png に関しては、以下のような指定をするようです。途中の path/to/~ の箇所は自分が favicon-152.png をどこに置いているかによって記述を変えます。自分は、favicon-152.png もルートに置くつもりです。
<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">ということで、今回作成した2つの ico ファイルはルートにおいて、favicon-152.png のみは HTML から指定してあげる。これで OK ということでした。
- メインの “favicon.ico”（16×16、32×32、48×48）作成
- ドキュメントのルートに設置
- iOS や Android 対応の “favicon-152.png” （152×152）作成
- HTML から指定