モバイルアプリを持つサービスは、1024×1024px の正方形 App アイコンと高さ 32-48px の横長 Web ロゴを両方持つ必要があります。バラバラに作ると「App と Web で別ブランドに見える」状態になりますが、1 つの scene から派生させれば一致感を保てます。
この記事では、App アイコン と Web ロゴを1 つのソースから両立させる設計手順と、iOS・Android・Web の各サイズ仕様を整理します。
正方形と横長を行き来する設計
ポイントは「シンボル単独」「シンボル＋ロゴタイプ」の 2 構成を最初から作っておくこと。正方形のときはシンボルのみ、横長のときはシンボル＋ロゴタイプ、と切り替えるだけで両立します。
プラットフォーム別の正確なサイズ仕様
App Store アイコン
- サイズ: 1024×1024px（正方形）
- 角丸 / マスク: iOS が自動で 22.37% 角丸（マスク）
Safe area は中央 80%、外周 10% は時計や Dock の影に隠れる前提で余白を取る
TestFlight サムネ
- サイズ: 512×512px に縮小表示
- 角丸 / マスク: 同じ角丸マスクが適用
細い装飾は 512 で見えなくなる。シンボルは画面の 60〜70% を占めるくらいで OK
Play Console（Android）
- サイズ: 512×512px（高解像度アイコン）
- 角丸 / マスク: Adaptive Icon は前景 / 背景レイヤー分離
Android は前景を 432×432px の Safe area に収めるルール。iOS と同じ画像は使えない
Web ヘッダー横ロゴ
- サイズ: 高さ 32-48px、幅は可変（120-200px 目安）
- 角丸 / マスク: なし（透過 SVG）
App アイコンのシンボルだけ抜き出し + 横にロゴタイプを並べる構成にすると一致感が出る
Safe area の取り方
iOS の App アイコンは外周 10% が時計や Dock の影で削られる前提で設計します。1024×1024 のキャンバスに対して、シンボルは中央 820×820 の中に収め、その外側は背景色のみ、というのが鉄板パターンです。
App + Web を一致させやすいサンプル
LogoLab AI のサンプルから、シンボルと文字が独立していてApp アイコン化しやすい4 つを選びました。
CubeLab
Wave
Infini
PRISMA
まとめ
App アイコン（正方形）と Web ロゴ（横長）の両立は、「シンボルを単独で成立させる」だけで 9 割解決します。あとは Safe area を 80% に取って、1024 / 512 / 32 の各サイズで実機チェックすれば、どこでも崩れません。IT・SaaS 向けロゴ作成ガイドもあわせて参考にしてください。
LogoLab AI はシンボル単独・シンボル＋文字の両派生を 1 つの生成結果から書き出せます。¥2,980 で 1 案買い切り、6 ヶ月作り放題 ¥14,800。