ファビコン用語集

ファビコンは、ブラウザがタブ・ブックマーク・履歴でサイトを表す小さなアイコンです。その正体、必要なサイズとフォーマット、追加方法を解説します。

アプリアイコンは、ブラウザのタブ内のサイトではなく、ホーム画面やランチャー上のインストール済みアプリを表します。各プラットフォームがどこから読むか、何を出荷するかを解説します。

ファビコンは小さなタブアイコン、Open Graph 画像はリンク共有時の大きなプレビューです。役割の違う別々のファイル、どちらがどれかを解説します。

ロゴは完全なブランドマーク、ファビコンは 16 ピクセルで読めなければならない小さな派生物です。ロゴを単純に縮小できない理由と、機能するものの導き方を解説します。

手作業でファビコンを作るとは、各サイズを書き出しタグを自分で書くことです。ジェネレーターはその両方を数秒で行います。手作りで十分な場面と、そうでない場面を解説します。

ファビコンのサイズを完全ガイド。ブラウザ・iOS・Android・PWA 向けの各寸法、必須のものはどれか、各ファイルの置き場所を解説します。

<link rel="icon"> タグは、ファビコンの場所をブラウザに伝えます。rel・href・type・sizes の役割、タグの置き場所、出荷する価値のあるモダンなセットを解説します。

"shortcut icon" はファビコン向けの旧来の rel 値です。"shortcut" キーワードが冗長な理由、今も必要か、代わりに何を書くべきかを解説します。

ブラウザはファビコンを他の多くのアセットより強く長く、しかもページとは別にキャッシュします。なぜそれほど粘着的なのか、そしてファビコンを強制的に更新する方法を解説します。

ファビコンは OS のライト／ダーク設定に反応できます。メディアクエリを内包した SVG か、link タグの prefers-color-scheme で切り替える 2 枚の PNG です。

Google は主にモバイルで、検索結果の横にファビコンを表示します。必要なサイズとフォーマット、アイコンの見つけ方、そして表示されない理由を解説します。

ブラウザやクローラーは、リンクしていようがいまいがドメインのルートから /favicon.ico をリクエストします。ファイルがルートに属する理由と、フレームワークによる置き場所の違いを解説します。

BIMI は、対応する受信トレイでメールの横にブランドロゴを表示します。メールのファビコンです。必要なもの：SVG Tiny PS ロゴ、DMARC の強制、そしてしばしば証明書を解説します。

ファビコンは正方形の枠に描画されるため、正方形でない画像はレターボックスになるか引き伸ばされます。事実上正方形が必須である理由と、横長ロゴの扱い方を解説します。

ファビコンは極小です。favicon.ico は通常数キロバイト、PNG の各サイズは 100KB を十分下回ります。サイズを左右する要因と、過大なファビコンが危険信号である理由を解説します。

ICO と PNG のファビコンを比較。色深度・透過・ファイルサイズ・ブラウザ対応、そして両方を競合なく出荷するための head タグを解説します。

SVG ファビコンは、あらゆるサイズで鮮明さを保ち、ダークモードに反応できる一枚のベクターファイルです。ブラウザ対応、link タグ、残すべきフォールバックを解説します。

favicon.ico は、アイコンが宣言されていないときにブラウザがサイトのルートからリクエストするアイコンです。ファイルの中身、置き場所、残すべき理由を解説します。

ファビコンを別ファイルではなく base64 のデータ URI としてインライン化できます。それがリクエストを節約する場面と、静かに壊れる表示面を解説します。

一部のブラウザはタブで GIF ファビコンをアニメーションさせます。どれが対応するか、なぜサイトが代わりに JavaScript でライブ状態を示すのか、いつ静止させるべきかを解説します。

WebP ファビコンはほとんどのモダンブラウザで機能しますが、どこでもではなく、/favicon.ico では決して機能しません。WebP アイコンが問題ない場面と、PNG・ICO が安全な選択であり続ける理由を解説します。

透明なファビコンはタブではすっきり見えますが、黒地に合成する iOS のホーム画面では崩れます。透過が役立つ場面と、不透明な背景を使う場面を解説します。

1 行のインライン SVG で絵文字をファビコンにできます。手早いプレースホルダーに便利です。OS ごとに見た目が変わる理由と、本物のファイルを書き出すべきタイミングを解説します。

マニフェストアイコンは、manifest.json の icons 配列に並ぶエントリです。各フィールドの役割、宣言すべきサイズ、ブラウザの選び方を解説します。

マスカブルアイコンは正方形いっぱいを埋め、プラットフォームが任意の形に切り抜けるようにします。80% のセーフゾーン、マニフェストの purpose フィールド、テスト方法を解説します。

Web アプリマニフェストは、サイトがインストールされたときの振る舞い（名前、アイコン、色、表示モード）をブラウザに伝える JSON ファイルです。何を保持し、なぜ必要かを解説します。

ブラウザがインストールを提案する前に、PWA には特定のアイコンが必要です。マニフェストの 192x192 と 512x512、できればマスカブル、そして iOS 向けの apple-touch-icon です。

マニフェストの display プロパティは、インストール済み PWA の見た目を決めます。browser、minimal-ui、standalone、fullscreen の各モードが何を見せるか、どれを選ぶかを解説します。

マニフェストには役割の違う二つの色があります。theme_color はアプリ周囲の OS UI に色を付け、background_color はスプラッシュ画面を塗ります。加えて meta の theme-color も解説します。

apple-touch-icon は、サイトをホーム画面に追加したときに iOS が使う PNG です。180x180 のサイズ、link タグ、そして透過が黒くなる理由を解説します。

theme-color メタタグは、ページ周囲の UI を何色で塗るかをブラウザに伝えます。表示される場所、ダークモードのバリアント、マニフェストでの対応を解説します。

Safari のピンタブは、rel="mask-icon" で宣言するモノクロ SVG を使います。ファイルの見た目の条件、color 属性、そして今も重要かどうかを解説します。

precomposed バリアントは、古い iOS にホーム画面アイコンへ光沢を加えないよう指示しました。今も何かの効果があるか、そして現在は何を使うべきかを解説します。

browserconfig.xml と msapplication-* メタタグは、Windows と旧 Edge のピン留めサイトのタイルを定義しました。その役割と、今も必要かどうかを解説します。

apple-mobile-web-app-capable メタタグは、ホーム画面の Web アプリを iOS でフルスクリーン起動します。役割、ステータスバー用タグ、そしてモダンなマニフェストでの代替を解説します。

apple-touch-startup-image は、iOS のホーム画面に追加した Web アプリの起動画面を設定します。デバイスサイズごとに 1 枚必要な理由と、関わるメディアクエリを解説します。