faviconとOG画像の違い：どこに表示される？役割の整理

ブログ運営でよく出てくる画像に、

• favicon（ファビコン）
• OG画像（オージー画像）

があります。

これらの画像は名前が似ていて混ざりやすいのですが、表示される場所も役割も違います。

この記事では、faviconとOG画像の違いを整理します。

faviconとは？

faviconは、Webサイトの「小さなアイコン」です。

主に

• ブラウザのタブ
• ブックマーク

などに表示され、サイトを見分けやすくする役割があります。

OG画像とは？

OG画像は、SNSやチャットなどでURLをシェアしたときに表示される「紹介画像」です。

例えば

• X（Twitter）
• LINE
• Facebook

などでリンクを貼ったときに、タイトルと一緒に出てくる画像がOG画像です。

違いを一言で言うと？

• favicon：ブラウザで見分けるための小さなアイコン
• OG画像：SNSシェア時の見た目（リンクカード）の画像

それぞれで意識したいポイント

favicon

• 小さくても見えるシンプルさ（タブやブックマークで表示サイズが小さいため、細部が潰れにくいデザインほど認識しやすいため）
• 複数サイズが必要になる場合がある（表示される場所や端末によって最適なサイズが異なるため、複数のサイズを用意すると見た目が崩れにくいため）

OG画像

• 文字が小さすぎない（SNSのプレビューは縮小表示されやすく、小さい文字は読めなくなるため）
• SNS上で見やすいレイアウト（一瞬で内容が伝わる配置だとクリックされやすいため）
• ファイルサイズが重すぎない（読み込みが遅いと表示されない場合や離脱につながるため）

Petanko Imageでできること

Petanko Imageは、画像を軽く・扱いやすくするためのWeb向け画像最適化サイトです。

• favicon作成（サイズ作成）
• 画像圧縮
• WebP変換

などをブラウザだけで行えます。

【画像圧縮例】

※数値は一例です。画像内容によって変わります。

関連ツール

• 画像圧縮
• WebP変換
• ファビコン画像を作成

Petanko Image は今後も、Webで扱いやすい画像づくりをサポートできるよう、改善を続けていきます。