ウェブサイトのロゴサイズ：必要なサイズをすべて解説
ウェブサイトのロゴサイズ
ウェブサイトのロゴサイズ：ヘッダー、ファビコン、SNS、Google | We.Inc
ウェブサイトのロゴの最適なサイズを解説。ヘッダーの高さ（CSSピクセル）、Retina用2倍ファイル、SVGとPNG、ファビコン、Appleタッチアイコン、共有画像、Google向けロゴのサイズです。
決まったロゴサイズは1つではありません。多くのサイトのヘッダーでは、デスクトップでロゴの高さをおよそ32〜60 CSSピクセルで表示し、スマートフォンではやや小さくしています。幅はロゴの形に従います。可能ならSVGを使い、そうでなければ高密度の画面でもくっきり見えるよう、表示サイズの2倍でPNGを書き出しましょう。
ロゴとアイコンのサイズ早見表（2026年10月時点）
- ウェブサイトのヘッダー
- デスクトップで高さ約32〜60 px（私たちの目安）
- デザイン上の慣習で、規格ではない
- ファビコン
- 正方形で8x8 px以上。48x48 pxより大きいサイズを推奨
- Google検索セントラル
- Appleタッチアイコン
- Appleの例ではiPhoneのRetina向けに180x180 px
- AppleのSafariウェブコンテンツガイド
- リンク共有画像（og:image）
- 1200 x 630 px以上を推奨
- Meta for Developers
- Googleの構造化データのロゴ
- 112x112 px以上
- Google検索セントラル
- Googleビジネスプロフィールの写真
- 720 x 720 pxを推奨、最小250 x 250 px、JPGまたはPNG
- Googleビジネスプロフィール ヘルプ
ロゴサイズの疑問は、たいていサイト公開後にロゴがぼやけたり小さすぎたりして生まれます。解決するには2つの数値で考えましょう。CSSピクセルで測る表示サイズと、それより大きくすべきファイルのサイズです。下で自分のロゴをアップロードすると、デスクトップとスマートフォンのヘッダーで両方を確認できます。ファイルがパソコンの外に出ることはありません。
- ロゴファイル（SVG、PNG、JPG、WebP）を選びます。読み込むのはブラウザーだけです。
- 高さのスライダーを、ヘッダーで表示したいサイズに合わせます。
- デスクトップとスマートフォンのプレビューを比べ、どちらでもロゴが読めるか確認します。
- レポートを読みます。ファイル自体のピクセルサイズと、2倍の画面でくっきり表示するのに必要なサイズが表示されます。
- ロゴをそのサイズかSVGで書き出し、サイトのCSSで同じ高さを指定します。
- CSSでは高さを指定し、幅はautoにしましょう。横長のロゴも正方形のロゴも形が保たれます。
- imgタグにwidthとheightの属性を付けておくと、ブラウザーが場所を確保し、ページがずれません。
- ファイル内のロゴ周りの余白は切り取りましょう。画像内の余白があると、実際より小さく見えます。
- ファビコン、アプリアイコン、SNSのプロフィール用に、正方形のバージョン（アイコンやモノグラム）を別に用意しましょう。
- ヘッダー、フッター、ダークモードで暗い背景を使う場合は、暗い背景でもロゴを確認しましょう。
よくある質問
ウェブサイトのヘッダーのロゴはどのサイズにすべきですか？
決まった規格はありません。大まかな目安として、多くのヘッダーではデスクトップでロゴの高さを約32〜60 CSSピクセル、スマートフォンでは約28〜44にしています。横長のワードマークは、コンパクトな正方形のマークより低めでも構いません。上のプレビューで自分のロゴを判断してください。
ウェブサイトのロゴはSVGとPNGのどちらがよいですか？
SVGはベクター形式なので、どのサイズでもくっきり表示され、ファイルサイズもとても小さいことが多いです。ロゴに写真のような細部が含まれる場合や、プラットフォームがSVGに対応していない場合はPNGを使い、表示サイズの2倍で書き出しましょう。
2倍ロゴやRetinaロゴとは何ですか？
高密度の画面では、1 CSSピクセルあたり複数のデバイスピクセルを使います。高さ40 pxで表示するロゴは、ファイルの高さが80 px以上あれば2倍の画面でくっきり見えます。imgのsrcset属性を使えば、1倍と2倍のファイルを用意してブラウザーに選ばせられます。
ファビコンのサイズはどれくらいですか？
Googleによると、ファビコンは正方形で8x8 px以上である必要があり、48x48 pxより大きいサイズが推奨されています。私たちのファビコンサイズガイドでは、よく使うファイルとそれをリンクするHTMLを紹介しています。
Googleビジネスプロフィールではどのロゴサイズを使いますか？
Googleビジネスプロフィールの写真のガイドラインでは、JPGまたはPNG、10 KB〜5 MB、推奨720 x 720 px、最小250 x 250 pxとしています。ヘルプページにロゴ専用のサイズは記載されていないため、720 x 720 pxの正方形のロゴが無難です。
CSSピクセルとファイルのピクセル
- CSSピクセルは、スタイルシートに書く単位です。標準的な画面では物理ピクセル1つに対応しますが、スマートフォンや高密度のノートパソコンでは2つや3つ分になることもあります。だからこそ、40 pxのロゴファイルは最新のスマートフォンでぼやけて見えるのです。引き伸ばされているからです。
- そこで、まず表示する高さを決め、その2倍の高さ（非常に精細なスマートフォンの画面向けには3倍）でファイルを書き出すか、SVGを使って計算を省きましょう。
横長のロゴと正方形のロゴ
- 横長のワードマークは控えめな高さでも大きく見えるため、スマートフォンではmax-widthで幅に上限を設け、メニューボタンが画面外に押し出されないようにしましょう。
- 正方形や丸いマークは読みやすくするのにもう少し高さが必要ですが、横にビジネス名をテキストで置く余裕が生まれます。テキストは検索エンジンやスクリーンリーダーにとっても扱いやすいものです。
コピーして使えるロゴのマークアップとCSS
高さ固定、幅autoのヘッダーロゴ
高さはCSSで指定し、幅はロゴの形に従います。widthとheightの属性で、読み込み中も場所を確保します。
2倍ファイル付きのPNGロゴ
logo.pngは高さ44 px、[email protected]は高さ88 pxです。高密度の画面では、ブラウザーが2倍のファイルを選びます。
ページのheadに置く正方形のアイコン
ファビコン、Appleタッチアイコン、共有画像で、いずれも正方形版のロゴから作成します。
ロゴサイズのプレビューツール
ロゴファイル
ファイルを選ぶまではサンプルのロゴを表示しています。
ヘッダー内のロゴの高さ：{v} px
デスクトップのヘッダー
メニュー
レポート
ファイルサイズ：{w} x {h} px。
SVGはどの高さでもぼやけずに拡大縮小できます。
この高さで2倍の画面にくっきり表示するには、ファイルの高さが{v} px以上必要です。
このファイルは、2倍の画面でこの高さに表示するのに十分な大きさです。
このファイルはそれより小さいため、高密度の画面ではぼやけて見える可能性があります。
この高さのCSS
ファイルはブラウザーだけが読み込み、アップロードされることはありません。
サンプルのロゴ
あなたのロゴ
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る