ファビコンはどのサイズにすべきですか？

複数のサイズを用意します。ブラウザタブには16×16と32×32、Apple touch iconには180×180、AndroidとPWAのマニフェストには192×192と512×512が使われます。SVGのファビコンなら、1つのファイルを任意の大きさへ拡大・縮小できます。

ファビコンに最適な形式は？

SVGは大きさを変えても鮮明で、CSSのメディアクエリを使ってダークモードにも対応できる柔軟な形式です。幅広い互換性を確保するには、32×32のPNGと従来のfavicon.icoも用意します。ICOは1つのファイルに複数のサイズを格納できます。

ファビコンのファイルはどこへ置きますか？

favicon.icoはサイトのルートへ置きます。ブラウザは`/favicon.ico`を自動で確認します。ほかのサイズはHTMLの`head`内で`link`タグを使い、PNGやSVGには`rel='icon'`、iOS向けには`rel='apple-touch-icon'`を指定します。

ファビコンを変更しても更新されないのはなぜですか？

ブラウザはファビコンを長期間キャッシュし、場合によっては更新まで数週間かかります。すぐに確認するには、ブラウザのキャッシュを消す、ファビコンのURLへバージョンを示すクエリ文字列（例：`?v=2`）を加える、ブラウザを再起動するといった方法があります。シークレットモードでキャッシュを避けられることもあります。

ファビコンをアニメーションにできますか？

一部のブラウザでは、アニメーションGIFをファビコンとして使うことが技術的には可能です。Firefoxは対応していますが、Chrome、Safari、Edgeなど多くのブラウザでは最初のフレームだけが表示されます。本番環境での利用は推奨されません。

ファビコンとは | 用語集

ファビコンは、ブラウザのタブ、ブックマーク、検索結果などでWebサイトを示す小さなアイコンです。一般に16×16または32×32ピクセルで表示され、Web上で目に触れる機会の多いブランド要素の1つです。

ファビコンの形式とサイズ

ファビコンは、16×16のICOファイル1つから、用途に応じた複数の形式とサイズを用意するものへと変化してきました。

ICO（favicon.ico）は従来から使われている形式です。16×16、32×32、48×48など、複数の画像サイズを1つのファイルに格納できます。linkタグで明示していなくても、ブラウザはサイトのルートにある/favicon.icoを自動で確認します。古いブラウザや一部の企業環境との互換性を保つため、現在も使われます。

PNGは、現在広く使われている形式です。32×32、192×192、512×512など、サイズごとのPNGファイルをHTMLのheadにある<link>タグから参照します。透明部分に対応し、現在の主要ブラウザで利用できます。

SVGは柔軟な選択肢です。1つのファビコンをどの大きさへ拡大・縮小しても、ピクセルの粗さが出ません。ファイル内でCSSを使えるため、@media (prefers-color-scheme: dark)を指定し、ライトモードとダークモードの切り替えに合わせて表示を変えることもできます。SVGファビコンはChrome、Firefox、Edgeで利用できます。

Apple touch icon（180×180のPNG）は、iOSでWebサイトをホーム画面へ追加したときに使われます。<link rel="apple-touch-icon">で参照し、角丸のアプリアイコンとして表示されます。

一通りの環境へ対応する構成では、通常のブラウザタブ用に32×32のPNG、Apple端末用に180×180のPNG、AndroidとPWAのマニフェスト用に192×192と512×512のPNG、ダークモード対応と拡大・縮小用にSVG、予備として従来のfavicon.icoを用意します。

ファビコンが表示される場所

ファビコンは、開発者が意識する以上に多くの場所へ表示されます。

ブラウザのタブ： 主な表示場所です。ページタイトルの横へ16×16または32×32ピクセルで表示されます。現在のブラウザでは、タブが狭くなるとファビコンだけが残る場合もあります
ブックマークとリーディングリスト： 保存したページに視覚的な目印が付き、長い一覧からサイトを見つけやすくなります
閲覧履歴： 最近開いたページのタイトルやURLと並んで表示されます
検索結果： GoogleやBingでは検索結果の横に表示され、小さいながら継続的なブランドの目印になります
PWAとモバイルのホーム画面： Progressive Web Appや「ホーム画面に追加」では、大きなサイズのファビコンがアプリアイコンとして使われます
タブグループとタブ管理ツール： タブを整理するブラウザ機能では、サイトを見分ける主な目印として使われます

ファビコンの作り方

まず、単純で見分けやすいデザインを選びます。ファビコンは16×16ピクセルでも判別できる必要があります。複雑なロゴ、細かいイラスト、文字の多いデザインは、この大きさでは機能しません。太い形、はっきりしたコントラスト、少ない要素で構成すると見分けやすくなります。

512×512以上の大きな画像でデザインし、必要なサイズへ縮小します。各サイズの見え方を保ちやすくなります。実際に表示される大きさでも確認し、ブラウザタブ上で判別できるかを確かめてください。

自動化する場合は、色を付けた文字、単純なSVG図形、ブランドアイコンなど、HTMLで整えた要素のスクリーンショットを元画像にできます。撮影した画像を必要な形式と寸法へリサイズして書き出します。この方法なら、ビルド工程の一部としてファビコンの生成と更新を自動化できます。

1つの元画像から必要なサイズと形式をまとめて作り、参照に必要なHTMLも出力したい場合は、ファビコン作成ツールを利用できます。

実際の公開作業での扱い方

ファビコンは、サイトのほかの視覚要素と同じ元画像から生成すると統一しやすくなります。favicon.ico、touch icon、マニフェスト用アイコンを別々に手作業で書き出す代わりに、高解像度の元画像を1つ管理し、公開準備の段階で必要なサイズを生成します。タブ、ブックマーク、PWA、検索結果の間でデザインがずれるのを防げます。

よくある失敗

favicon.icoだけを使う： ICOファイル1つでは、Apple touch icon、Androidのマニフェスト用アイコン、SVGのダークモード対応をまかなえません。環境を問わず同じ見え方にするには、必要な形式とサイズを一通り用意します
細部の多いデザインにする： ブラウザタブでは16×16ピクセルで表示されます。細い線、小さな文字、複雑な形は判別できなくなります。最も分かりやすい要素までデザインを絞ってください
透明部分を使わない： 背景が透明でないファビコンは、ブラウザのタブやブックマークバーで単色の四角形として表示されます。透明背景に対応したPNGまたはSVGを使います
ダークモードで確認しない： 暗い色のファビコンは、暗いタブバーに溶け込むことがあります。CSSのメディアクエリで明暗の画像を切り替えられるSVGを使うか、どちらの背景でも見分けられる色を選びます
キャッシュを考慮しない： ブラウザはファビコンを長期間キャッシュします。更新後はURLへバージョン文字列を加えるか、ファイル名を変えて再取得させます

ファビコン