2018年の Favicon 設定

Favicon って2007年ぐらいに設定したのを最後に全然やっていなかったので、2017年の終わりに改めて最近の Favicon 事情を調べた。

目次

最も一般的な Favicon：16x16px

最も一般的な Favicon は、拡張子 .ico、16x16px でアイコンファイルを用意し、以下の link 要素で設定するというもの。

<link rel="icon" href="/favicon.ico">

昔からある Favicon はこんな仕様。昔は rel="shortcut icon" と書いたが、最近は rel="icon" でいいようだ。type 属性とかも要らないらしい。

HTML の仕様で、"ルートディレクトリに favicon.ico という名称のファイルを設置しておくと、HTML中で指定が無くともfaviconとして認識される"らしいので、ルートディレクトリにこの名前で置いておいた上で link 要素で明示すると確実か。

拡張子 .ico な画像はどうやって作るかというと、適当な画像編集ソフトで ICO 形式で保存すれば良いし、ツールがなければ PNG 画像を用意して以下のようなサイトで変換して用意すれば良い。

ICO ファイルには複数枚の画像を格納する仕組みもあるようなので、コレはコレで奥が深そう…。

iOS Safari 用：色々あるけど 152x152px だけで良さそう

iPhone などの iOS 向けの Favicon というものがある。rel="apple-touch-icon" で指定する PNG 画像で、sizes 属性を併用して様々なデバイス向けに色々なサイズを用意できるようだ。しかし、全てのサイズを用意する必要はなく、なかったら適当に拡大・縮小して使用される。「ホーム画面に追加」で参照される場合なんかを考えると、数あるサイズの中でも 152x152px の画像だけを用意しておけば良さそうだ。

コレも favicon.ico と同じように、link 要素の指定がなくても apple-touch-icon… で始まる画像がないか iOS が自動的に探しに行くようなので、ファイル名は apple-touch-icon-152x152.png 固定で用意しておくのが良いだろう。

<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png" sizes="152x152">

Android Chrome 用：色々あるけど 192x192px だけで良さそう

続いて Android 用。コチラは rel="icon" で、sizes 属性を指定して複数サイズの PNG 画像を用意できる。コチラも色々なサイズが用意できるが、192x192px サイズが推奨されているようなので、コレだけ用意することにする。

<link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">

1枚の画像から複数サイズの Favicon を一括生成する

そういうワケで、最低限用意しておきたいのは

の3種類だが、コレをイチイチ用意するのは大変だ。そこで、以下のジェネレータサイトを利用すると、1枚の画像を複数サイズで用意してくれる。

Favicon が正しく設置できているか確認する

画像を用意し、HTML に link 要素を書き込んだが、コレが本当に正しく設定できているか怪しい…。

そんな時は、以下のサイトで各環境向けの Favicon が正しく設定できていて読み込めるかを確認してみよう。

参考