maskable 安全領域ガイド
ランチャー切り抜きで欠けない配置ルールを確認。
ウェブサイトに Favicon・PWA アイコンを設定
アイコンパックを生成して展開し、HTML のリンクを追加して、ウェブアプリマニフェスト内の画像パスを確認します。
推奨入力
- PNG または SVG。できれば正方形で 512×512 以上。
- ロゴ配置の自由度を重視するなら透明背景が有効です。
- 正方形でない画像は自動でキャンバス補完し、主体を中央配置します。
実践フロー
- 画像をアップロードし、主体境界プレビューを確認します。
- 余白モードをバランスまたはセーフに設定し、favicon/PWA プレビューを確認します。
- 出力前に manifest 名、背景色、テーマカラーを確認します。
- ZIP をダウンロードし、favicon.ico、16/32/48、Apple 180、PWA 192/512 を取得します。
ケース例
入力: 1024×1024 の透明ロゴ SVG。
設定: バランス余白 + 透明背景。
出力: Web サイトと PWA に必要な主要アイコン一式をそのまま導入可能。
公開前のポイント
- 16×16 や 32×32 の favicon でも判別できるよう、元画像はできるだけ単純な形にします。
- 本番で使う manifest とアイコンを含む最終 ZIP を保存しておきます。
- 公開後は実際のブラウザのタブや PWA インストール表示でアイコンを確認します。
ダウンロードしたアイコンの使い方
ZIP には PNG 画像10枚、favicon.ico、site.webmanifest が入っています。ウェブサイトと PWA 用の素材であり、ネイティブアプリの完全なプロジェクトではありません。
ZIP に含まれるファイル
favicon-16x16.pngfavicon-32x32.pngfavicon-48x48.pngapple-touch-icon.pngicon-192x192.pngicon-512x512.pngicon-maskable-192x192.pngicon-maskable-512x512.pngicon-256x256.pngicon-1024x1024.pngfavicon.icosite.webmanifest
- ZIP を展開してウェブサイトに配置します。以下の例では、すべてのファイルをサイトのルートに置きます。
- 次のリンクをページの HTML の head 内に追加します。
- 出力前にアプリ名、色、開始 URL を設定します。site.webmanifest と、そこから参照する4枚の PWA PNG を同じディレクトリに置きます。画像パスはマニフェストを基準に解決されます。
- 画像とマニフェストの URL を開き、読み込みと対象端末での表示を確認します。アイコンの追加だけでは、インストール可能な PWA の設定は完了しません。
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">/icons/ などのサブディレクトリを使う場合は HTML のリンク先を変更し、マニフェストと PNG を同じ場所に置きます。start_url は実際のアプリの入口に設定してください。元の SVG は ZIP に含まれません。
よくある質問
favicon と PWA アイコンは同じ元画像で作れますか？
はい。元画像の品質と余白設定が適切なら、同一ソースで問題ありません。
小さい favicon がぼやけるのはなぜですか？
小サイズでは細部が潰れやすいため、形状を簡潔にし余白を増やすと改善します。
サイズごとに手作業で作る必要がありますか？
不要です。一般的なサイズはツールが自動生成します。
関連するアイコンシナリオ
SVG 変換ガイド
SVG からアイコンパックを作る実践フロー。