Android Chrome Icon 192x192 — ホーム画面追加用Favicon

Android Chrome Icon 192x192

192x192アイコンは、ユーザーがWebサイトをホーム画面に追加する際にAndroid Chromeで使用されます。Appleとは異なり、AndroidはWeb Appマニフェストを使用してアイコンを定義し、マスカブルアイコンなどの追加機能をサポートしています。

Web Appマニフェスト

Android Chromeはmanifest.json（またはsite.webmanifest）ファイルからアイコン情報を読み取ります：

{
  "name": "My Website",
  "short_name": "MySite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

マスカブルアイコン

Androidはさまざまなデバイス固有の形状（円形、正方形、角丸正方形、スクワークル）に適応するマスカブルアイコンをサポートしています：

• セーフゾーン: 重要なコンテンツをアイコンの内側80%以内に保つ
• 背景: 192x192キャンバス全体をソリッドな背景色で塗りつぶす
• マスカブルとして宣言: マニフェストエントリに"purpose": "maskable"を追加

デザインガイドライン

• 透明度ではなくソリッドな背景色を使用
• ロゴやシンボルを十分なパディングで中央に配置
• 円形、スクワークル、角丸正方形のマスクでテスト
• ネイティブAndroidアプリのアイコンの横で認識できることを確認
• マスカブルと標準アイコンの別バージョンの作成を検討