Androidのホーム画面にウェブアプリを追加した際、せっかくのロゴが白い円の中に入った小さな「切手」のように表示されたことはありませんか？これは通称「恥の白枠」と呼ばれる現象です。Androidの適応型アイコン（Adaptive Icons）は、デバイスの設定によって円形や角丸四角形に変化するため、適切な maskable icon favicon が設定されていないと、システムが安全のために勝手に余白を追加してしまうのです。

2026年現在、ユーザーはPWAに対してネイティブアプリと同等の品質を求めています。Spotify や Slack のアイコンを見てください。どんな形状のスマホでも、アイコンが画面いっぱいに美しく表示されています。これは Web App Manifest の maskable 指定のおかげです。今日はあなたのアプリのアイコンを、プロフェッショナルな外観に修正しましょう。

実装前の準備：プロのツールセット

まず、ソース画像が必要です。推奨は 512x512 ピクセルの PNG です。SVGも素晴らしいですが（詳細は SVG favicon ガイド を参照）、Androidのホーム画面用にはPNGが最も確実です。ここで重要なのは、背景を塗りつぶしの色にすることです。透過背景にすると、OSが勝手に色を補完してしまい、デザインが崩れる原因になります。

ステップ 1：80% セーフゾーンの法則

最大の失敗は、ロゴを画像の端まで描いてしまうことです。Maskable Iconはいわば「塗り足し」のある画像です。システムが周囲をカットするため、重要な要素は画像中央の 80% 以内のエリア に配置する必要があります。正方形の中央に円を描き、その中にロゴが収まっていれば合格です。

ステップ 2：アセットの生成

手動で何枚も画像を作る必要はありません。Mzu favicondl を使えば、ベースとなるアイコンを簡単に用意できます。ただし、Maskable用には少し余白を持たせたデザインをFigmaなどで作成し、それを書き出すのがコツです。現在のアイコンが正しく設定されているか不安な方は、favicon監査ガイド でチェックしてみてください。

ステップ 3：manifest.json の更新

ここが技術的な肝です。ブラウザに対し、「このアイコンはカットしても大丈夫なデザインだ」と伝える必要があります。'purpose': 'maskable' 属性がないと、ブラウザはそれを通常のアイコンとして扱い、例の白枠を追加してしまいます。

{
  'name': 'My App Pro',
  'icons': [
    {
      'src': '/icons/icon-192x192.png',
      'sizes': '192x192',
      'type': 'image/png',
      'purpose': 'any'
    },
    {
      'src': '/icons/maskable-512x512.png',
      'sizes': '512x512',
      'type': 'image/png',
      'purpose': 'maskable'
    }
  ]
}

'purpose': 'any' はタスク切り替え画面用、'maskable' はホーム画面用です。Next.jsなどを使っている場合は、Next.js favicon ガイド も参考にしてください。

ステップ 4：DevTools での検証

デプロイしてスマホで確認する前に、PCのChrome DevToolsを使いましょう。F12を押し、Application タブから Manifest を選択します。アイコンセクションにある「Show only the minimum safe area for maskable icons」にチェックを入れ、ロゴが欠けていなければ完璧です。

よくある落とし穴

最も多いミスは、透過PNGを使ってしまうことです。OSが透過部分を勝手な色で塗りつぶし、ブランドイメージを損なうことがよくあります。必ずブランドカラーで塗りつぶした背景を使用してください。また、HTMLの <head> 内で <link rel='manifest' href='/manifest.json'> を記述し忘れないようにしましょう。

Maskable Iconの設定は、わずか10分の作業ですが、それだけでアプリの信頼性が格段に上がります。モバイル対応が終わったら、デスクトップ用のアイコンも Mzu favicondl で整えて、完璧なブランド体験を提供しましょう。