Favicon

ファビコンは、ブラウザのタブ、ブックマーク、履歴、一部の検索結果でWebサイトを識別する小さなアイコンです。名前は「favorites icon」に由来します。Internet Explorerがブックマークを指して使っていた用語です。

ブラウザは当初、サイトのルートにあるfavicon.icoというファイルを要求していました。ICO形式は1つのファイルに16×16、32×32、48×48ピクセルなどの複数のサイズを格納できます。現在のHTMLでは、rel属性が icon のlink要素でアイコンを宣言します。ファイルはICOのほか、PNGやSVGも使えます。

Appleのデバイスは、ホーム画面のショートカット用に別のタッチアイコンを使います。通常は180×180のPNGです。インストール可能なWebアプリは、Webアプリのマニフェストで、192×192や512×512などの大きいアイコンを指定します。

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

ファイル	形式	一般的なサイズ
favicon.ico	ICO	1ファイルに16、32、48ピクセル
アイコンのlink	PNGまたはSVG	32×32のPNG、または拡大縮小可能な1つのSVG
Appleのタッチアイコン	PNG	180×180
マニフェストのアイコン	PNG	192×192、512×512

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

• ブラウザのタブとアドレスバー。
• ブックマーク、リーディングリスト、履歴。
• スマートフォンやタブレットのホーム画面のショートカット。
• 一部のサービスの検索結果とリンクのプレビュー。

ファビコンの作成手順

1. ロゴ全体ではなく、正方形のロゴマークから始めます。
2. 16×16ピクセルでも判読できるように単純化します。
3. PNGの各サイズ、任意のSVG、ICOファイルを書き出します。
4. ページのheadにlink要素を追加し、複数のブラウザで確認します。

実際の公開作業での扱い

ファビコンがないと、タブのスクリーンショットやドキュメントでは汎用のアイコンが表示されます。ガイドや公開告知のためにブラウザのウィンドウを撮影する前に、ファビコンが読み込まれることを確認してください。ブラウザはファビコンを強く保持するため、更新後も古いアイコンが残ることがあります。

よくある間違い

• 細かいロゴを使い、16ピクセルでぼやけてしまう。
• Appleのタッチアイコンを設定し忘れ、スマートフォンでページのスクリーンショットが表示される。
• 透明なアイコンを使い、ダークテーマのブラウザで見えなくなる。
• 1つのブラウザだけで確認する。

今すぐ修正したい画像がありますか？

Image Converter でロゴをPNG、JPG、WebPの間で変換し、Screenshot Resolution Checker でピクセルサイズを確認してください。

よくある質問

favicon.icoはまだ必要ですか？

一部のツールがサイトのルートからこのファイルを要求するため、多くのサイトは現在も含めています。現在のブラウザはPNGまたはSVGのアイコンのlinkで対応できます。

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

一部のブラウザはアニメーションGIFのファビコンを表示しますが、対応状況はまちまちです。確実に表示させるには、静止画のアイコンを使ってください。

出典

• Favicon（Wikipedia）
• HTML Living Standard: links

関連リソース

• Open Graphイメージ: 共有リンク用の大きいプレビュー画像。
• Image Compressor: アイコンのファイルサイズを縮小します。