Webページに指定するfaviconについて理解が曖昧な部分も多かったので調べた。

faviconとは

faviconとは、「favorite icon」の略語である。
元々はブラウザのお気に入り一覧表示時にアイコン画像を表示するのに利用されていた。
現在では、ブラウザのタブに表示したりスマートフォンのアイコンに表示したりと用途が拡張されている。

faviconの種別

faviconは様々な用途で利用される。

• ブラウザのタブに表示するアイコン
• ブックマークに表示するアイコン
• スマートフォン端末のホーム画面に表示するアイコン

また、別の用途にもfaviconが利用されることはあるが、レガシーな環境向けであるため本記事では設定方法についてまとめない。

• Windowsのタイルアイコン
• Safariのページピン用のアイコン
• iOS端末のホーム画面のアイコン（光沢加工あり）

アイコンファイル

以下のファイル形式が各ブラウザに対応している。

• ICO
• PNG
• SVG

ブラウザの対応状況を見るとICO形式を利用するのが無難。
ただし、SVG形式には複数サイズの画像を用意する手間が不要というメリットがあるので今後のブラウザの対応状況次第で採用すべきである。

設定

上記で挙げた用途別の設定方法。

ブラウザのタブに表示するアイコン / ブックマークに表示するアイコン

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

スマートフォン端末のホーム画面に表示するアイコン

Androidの場合は<link rel="icon" href="/favicon.ico" />に指定したアイコンが表示される。

ただし、iOSの場合はapple-touch-iconに別途指定する必要がある。

iOSのアイコンは角丸で表示されるため、角部分にデザインが無いものが好ましい。

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