サロンやクリニックの Web 予約導線では、ロゴが5〜100px の小さなアイコンとして何度も表示されます。ホットペッパーの店舗一覧、LINE のトークルーム、自社予約サイトのヘッダー、Google 検索のパネル — すべて求められる解像度と縦横比が違います。
この記事では、日本の予約・集客系プラットフォーム別に、ロゴで用意しておくべき解像度・縦横比・favicon との関係を整理します。
プラットフォーム別の必要解像度
ホットペッパービューティー
推奨: サロンロゴ画像 推奨 200×200px 以上、最終表示は 48〜120px
検索結果一覧では 80×80px 前後、店舗詳細では 120px 前後で表示されます。アップロードは 200px 角以上が推奨で、JPG/PNG。SVG は直接アップロードできないため、SVG から 512px 角の PNG を書き出して入稿します。
LINE 公式アカウント / LINE 予約
推奨: プロフィール画像 640×640px 推奨、最小 480×480px
LINE のトークルームでは 60px 程度のアイコンに縮小されます。シンボルだけの正方形バージョンを用意し、文字を入れすぎないことが重要。背景色がトークルームのテーマに依存するため、透過 PNG ではなく単色背景に置いた版が安全です。
自社予約サイト（STORES 予約・RESERVA など）
推奨: ヘッダーロゴ 横長 600×120px 程度、favicon 32×32px / favicon: 32×32 / 16×16
PC ブラウザでは横長ロゴが映えますが、スマホでは縦に短く詰められます。横長版・正方形版・favicon の 3 つを用意するのが基本セット。favicon はブラウザのタブで識別される唯一の手がかりで、16px でも判別できる「シンボルだけ」のバージョンが必要です。
Google ビジネスプロフィール
推奨: ロゴ 720×720px 推奨、最小 250×250px
Google 検索の店舗情報パネルで表示されます。正方形での視認性が最優先。横長ロゴだけだと自動クロップで欠けます。シンボル + 略称の正方形ロックアップを別に用意するのが安全です。
Retina ディスプレイ対応
スマホ・MacBook の Retina ディスプレイは物理ピクセルが論理ピクセルの 2〜3 倍あります。ヘッダーで 200px の領域に置くロゴは、実際には 400〜600px の画像を用意しないと「ぼやけて」見えます。ラスタ画像（PNG）で配信する場合は、最低でも表示サイズの 2 倍、できれば 3 倍を用意します。SVG なら 1 つで全解像度に対応できるため、対応サイトでは SVG をアップロードするのが最も省力です。
favicon とロゴの関係
favicon は 16×16〜32×32px という極端に小さい領域で表示されるブラウザタブ用アイコンです。フルロゴを縮小しても文字は読めず、潰れます。シンボル部分だけを切り出した正方形版を別途用意し、それを favicon にします。文字ロゴしかない店舗の場合は、イニシャル 1〜2 文字を別レイアウトで favicon 専用に組み直すのが現実的です。
最低限揃えておく 4 ファイル
| 用途 | 推奨フォーマット | サイズ |
|---|---|---|
| マスターロゴ（横長） | SVG + PNG | SVG / PNG 2400×600px |
| 正方形ロックアップ | SVG + PNG | SVG / PNG 1024×1024px |
| SNS プロフィール | PNG | 640×640px（LINE）/ 400×400px（Instagram） |
| favicon | ICO + SVG | 16 / 32 / 48px マルチサイズ |
サンプル
Kanon
LUNA
麻の葉
Leaf Salon
まとめ
ホットペッパー・LINE・自社予約・Google ビジネスプロフィール、それぞれで求められるロゴ形式は違いますが、共通して「正方形版」「Retina 2 倍解像度」「favicon 用シンボル」の 3 点を押さえれば破綻しません。サロン向けロゴ作成でも、予約導線まで意識した展開を案内しています。
LogoLab AI で生成したロゴは SVG なので、どの解像度でも鮮明に表示できます。正方形版・favicon 用シンボルもブラウザ上で書き出せます。