favicon(ブックマークアイコン、お気に入りアイコン)について

って何?

だいたいブラウザのタブのタイトル左に出てくるちっちゃいコイツの事。

指定可能な画像の形式

メジャーなブラウザはPNG/GIF/JPEGといったメジャーな形式の画像に対応している。
SVGはFirefoxしか対応していない。Operaは対応したとかなり昔にアナウンスがあったようだが、現状は反応しない。

以前は.icoという拡張子でMicrosoftな独自形式のファイルしか指定できなかった。

一般的な指定方法

画像にlinkでリンクするだけ。

<link rel="icon" href="favicon.png">

iOS(Safari)について

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-3x.png">

といった具合で複数のサイズのアイコンを指定する。ブラウザは自分が表示するサイズから大きな方向に一番近い画像を利用する。例えば153pxのアイコンを利用するブラウザの場合は167pxのアイコンを使う。もちろん181px以上の場合に無しとはならず、一番大きい180pxのアイコンを使う。

このアイコンは、タブの一覧時とブラウザメニューから「ホーム画面に追加」した時のアイコンに利用される。
タブでの表示時:

ホーム画面での表示時:

iPad Proだと167サイズだという情報もあるが、iPad Proも含めてほとんどのiOSデバイスで152サイズのものが表示される模様。なお公式ドキュメントにはずっとまともな情報が載っていない。角は丸く切り取られる(上記例では真四角な画像を指定したが、角が切り取られている)。

古いiOS(6以前、公式サポート対象外)のSafariでは、ファイル名をapple-touch-icon-precomposedにして、iOSが勝手に付けるグラデーションエフェクトをOFFにする必要があったが、今はデフォルトでエフェクトは付かない。

Android(Chrome)について

faviconはiOSと同じく、タブの一覧時とブラウザメニューから「ホーム画面に追加」した時のアイコンに利用される。
タブでの表示時:

ホーム画面での表示時:

おそらく端末によるが、Nexus 5Xでは180サイズで表示されていた。角は丸くならず四角いまま表示される。

iOS向けのapple-touch-iconの設定に反応する。お前Appleちゃうやろ。

参考