favicon / PWA ガイド
通常の Web/PWA アイコン出力手順を確認。
Maskable アイコンの安全領域を確認
ランチャーのプレビューでロゴと余白を確認し、192×192・512×512 の maskable PNG アイコンをダウンロードします。
入力チェック
- 輪郭がはっきりした PNG/SVG を使用します。
- 512 出力品質のため、1024×1024 ソース推奨です。
- 細かすぎる要素は簡略化するとマスク後も見やすくなります。
実践フロー
- 画像をアップロードして余白モードをセーフに設定します。
- maskable プレビューで主体が端に近すぎないか確認します。
- 透明余白に依存するロゴは、安定した背景色でも見え方を確認します。
- ZIP から icon-maskable-192x192 / 512x512 を利用します。
ケース例
入力: 透明背景のアプリロゴ PNG。
設定: セーフ余白 + 単色背景（maskable 安定化）。
出力: 円形やスクワークル裁切でも主体が読みやすく保たれます。
安全領域のポイント
- 文字、細い線、重要な角の要素は外周に近づけすぎないようにします。
- 可能なら明るい背景と暗い背景の両方で見え方を確認します。
- 通常アイコンと maskable アイコンを同じリリースフォルダに保存し、manifest のずれを防ぎます。
よくある質問
通常の 512 アイコンと何が違いますか？
maskable はマスク裁切前提のため、より広い安全余白が必要です。
背景は透明と単色どちらが良いですか？
多くのランチャーでは単色背景の方が見え方が安定します。
主体が端に近いかどうかの目安は？
文字や主要図形がプレビュー端に寄る場合はセーフモード推奨です。
関連するアイコンシナリオ
SVG 変換ガイド
SVG から一式出力する流れを見る。