形式	透過	拡大劣化	サイズ	主な用途
SVG	○	なし（ベクター）	極小	ヘッダー・ファビコン・印刷兼用
PNG	○	あり	中	OGP・Apple Touch Icon・背景透過
WebP	○	あり	小	ページ速度重視のサイト
JPEG	×	あり	小	写真入りロゴ（稀）

2026年現在、SVGが最も汎用性の高い形式です。主要ブラウザはすべてSVG対応済みで、レティナディスプレイでもぼやけず、ファイルサイズも軽量です。ヘッダーロゴには原則SVGを使い、OGPや構造化データなどSVG非対応の用途にはPNGで補完するのが現在のベストプラクティスです。

用途別の最適な形式とサイズ

用途	推奨形式	推奨サイズ
ヘッダー	SVG	幅200〜300px相当（可変）
フッター	SVG or PNG	ヘッダーと同じか小さめ
ファビコン	SVG or ICO	32×32 / 16×16
Apple Touch Icon	PNG	180×180px
OGP画像内のロゴ	PNG	OGP全体1200×630px
構造化データ（Organization）	PNG	112×112px以上

レティナディスプレイ対応を考慮する場合、PNG画像は表示サイズの2倍のピクセル数で書き出す必要があります（例：150×50pxで表示するなら300×100pxで書き出す）。SVGであればこの問題が発生しません。

カラーモードの注意点：RGB vs CMYK

印刷物ではCMYK、WebではRGBが標準です。ロゴがCMYKのまま書き出されていると、ブラウザ上で色味が変わります。

上の画像は当サイトのロゴをRGB（左）とCMYK（右）で比較したものです。CMYKでは本来の色味が再現されていないのがわかります。

対策：ロゴデータを受け取ったら、まずカラーモードがRGBになっているかを確認してください。IllustratorやPhotoshopで「編集」→「プロファイル変換」からRGBに切り替え可能です。

ダークモード対応

近年、OSやブラウザのダークモード利用者が増えています。白背景前提のロゴは、ダークモードで見えなくなることがあります。

SVGの場合：CSSのprefers-color-scheme: darkでSVG内の色を切り替え可能
PNGの場合：白背景用・暗背景用の2パターンを用意する
設計段階での配慮：ロゴの周囲に十分な余白を確保し、背景に依存しないデザインにする

ファビコンの実装方法（2026年版）

ファビコンとは

ファビコン（favicon）は「favorite icon」の略で、ブラウザのタブ・ブックマーク・Google検索結果・スマートフォンのホーム画面に表示される小さなアイコンです。サイトの識別に重要な役割を果たします。

2026年時点の推奨実装

<!-- SVGファビコン（モダンブラウザ対応） -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- フォールバック（IE/旧ブラウザ用） -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

2026年現在、SVGファビコンは主要ブラウザで対応済みです。SVGなら1ファイルで全サイズに対応でき、ダークモード切替もCSS内で制御可能です。icoファイルはフォールバックとして残しておくと安心です。

シンボルマークがない場合

ロゴタイプ（文字のみのロゴ）だけでシンボルマークがない場合は、頭文字やブランドカラーを使った専用アイコンを作成します。GoogleやAmazonも、ロゴとは別にファビコン専用のアイコンデザインを用意しています。

一目見て「あのサイトだ」とロゴが連想できるデザインにするのがポイントです。

制作会社にロゴデータを渡す際のチェックリスト

Web制作を外注する際に、以下のロゴデータが揃っていると制作がスムーズに進みます。

AI / EPS（ベクターの元データ）：最も重要。SVG/PNGの書き出し元になる
SVG（Web用ベクター）：ヘッダー・ファビコンに使用
PNG（背景透過・2xサイズ）：OGP・Apple Touch Icon等に使用
ブランドカラーのカラーコード：HEX（例：#1a1a1a）とRGB値の両方
ロゴ使用ガイドライン：余白規定・最小サイズ・使用禁止例（あれば）

制作会社側でSVG/PNG/ファビコンを書き出す場合でも、ベクターの元データ（AI/EPS）がないと対応できないケースがあります。JPEGしか手元にない場合は、ロゴのトレース（再作成）が必要になり追加費用が発生する場合があります。

制作会社からのロゴ納品で確認すべきデータ

ロゴ制作やWebサイト制作を依頼した際、以下のデータが納品に含まれているか確認しましょう。

SVG：ヘッダー・フッター用（Web最適化済み）
PNG：背景透過・レティナ対応2xサイズ
ファビコン一式：SVG + ICO + Apple Touch Icon（180×180px）
OGP用画像：1200×630px
カラーコード一覧：HEX / RGB / CMYK（印刷用）をスタイルガイドに記載

「JPEGのロゴしか手元にない」というケースは実務では非常に多くあります。その場合はトレース（再作成）が必要になり、追加の費用と時間がかかります。ロゴ制作を依頼する際は、ベクターデータの納品を必ず確認しておきましょう。

ロゴ制作の実績

コーポレートサイトと合わせてロゴのデータ整備を行った制作実績を2件ご紹介します。

よくある質問（FAQ）

Q. ロゴはSVGだけ用意すればいい？

A. ヘッダーやファビコンにはSVGが最適ですが、OGP画像や構造化データ（Organization logo）ではPNGが必要です。SVGとPNGの両方を用意するのが確実です。

Q. 印刷用のロゴデータをそのままWebに使えますか？

A. カラーモードがCMYKのままだとブラウザ上で色が変わります。RGB変換が必要です。また、印刷用のEPS/AIデータは直接Webに埋め込めないため、SVGやPNGへの書き出しが必要です。

Q. ファビコンのサイズはいくつ用意すればいい？

A. 2026年時点では、SVGファビコン1つ + ICO（32×32）のフォールバック + Apple Touch Icon（180×180px PNG）の3点があれば主要環境をカバーできます。

Q. JPEGのロゴしか手元にない場合は？

A. JPEGは背景透過ができず、拡大するとぼやけるため、Webでの使用には不向きです。元のベクターデータ（AI/EPS）がない場合はトレース（再作成）が必要です。制作会社に相談してください。

まとめ

Webロゴの標準形式はSVG。レティナ対応・軽量・ダークモード制御が可能
OGP・構造化データ・Apple Touch IconにはPNGが必要。2形式を必ず用意する
カラーモードは必ずRGBに変換。CMYKのままだと色味が変わる
ファビコンはSVG + ICO + Apple Touch Iconの3点セットが2026年のベストプラクティス
制作会社への発注時はベクター元データ（AI/EPS）を必ず渡す

ロゴ制作・Webサイト制作のご相談はコーポレートサイト制作をご覧ください。

ロゴ・Webサイト制作のご相談

ロゴデータの整備やWebサイトへの実装についてお困りの方はお気軽にどうぞ。

株式会社ENVY DESIGN

西村渉

Webサイトで使うロゴのデータはどう作る？

Webサイトにロゴが必要な3つの理由

1. ブランド認知と差別化

2. 信頼性の向上

3. SEO・構造化データへの活用

ロゴデータの形式と使い分け