favicon 作成に関するメモ

今回は、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 対応は完了です。

  1. メインの “favicon.ico”(16×16、32×32、48×48)作成
    1. ドキュメントのルートに設置
  2. iOS や Android 対応の “favicon-152.png” (152×152)作成
    1. HTML から指定