Basics
Open Graph 画像とファビコンの違い
ファビコンは、ブラウザがタブやブックマークに表示する小さな正方形のアイコンで、通常 16〜48 ピクセルです。Open Graph 画像は、リンクがソーシャルメディアやチャットで共有されたときに現れる、大きな横長のプレビュー（およそ 1200x630）です。両者は別々に宣言される別々のファイルで、一方が他方の代わりにはなりません。
二つのアイコン、二つの役割
ファビコンはブラウザの中でサイトを識別します。タブの小さな正方形、ブックマーク、履歴一覧です。Open Graph 画像はフィードの中であなたのリンクを売り込みます。ツイートの大きな横長バナー、Slack の展開、iMessage のプレビューです。
サイズも形も現れる場所も異なるため、別々に宣言されます。ファビコンには rel="icon"、プレビューには og:image のメタタグです。どちらも他方の代わりにはなりません。
並べて比較
| 観点 | ファビコン | OG 画像 |
|---|---|---|
| サイズ | 16〜48px | 約 1200x630 |
| 形 | 正方形 | 横長 |
| 宣言方法 | rel="icon" | og:image メタ |
| 表示場所 | タブ、ブックマーク | ソーシャル＋チャットのプレビュー |
OG 画像とファビコンに関するよくある質問
ファビコンはソーシャルプレビューに使われますか？
いいえ。ソーシャルやチャットのプレビューは、og:image メタタグの Open Graph 画像を使います。ファビコンはブラウザの中にしか現れません。
ファビコンを OG 画像として使えますか？
有効には使えません。サイズも形も違います。32px の正方形を 1200x630 の枠に拡大すると壊れて見えます。これらは別々のアセットです。
ブラウザのタブに表示されるのはどちらですか？
ファビコンです。Open Graph 画像がタブに現れることはなく、プレビューを描画する場所でリンクが共有されたときにのみ表示されます。