Android Chromeの三点メニューから「ホーム画面に追加」をタップすると、汎用的な頭文字のプレースホルダーがランチャーに表示されます。ブラウザは、あなたが丹精込めて作り込んだfaviconを無視してしまうのです。本記事では、まさにこのシナリオをfavicon for android add to home screenのフローで修正する方法を解説します。

Android Chromeは、ユーザーがサイトをインストールする際、標準の<link rel='icon'>タグを読み取りません。読み取るのはWeb App Manifestです。manifestが欠落している、形式が不正である、あるいは必要なアイコンエントリが抜けている場合、Androidホーム画面のショートカットはスクリーンショットや汎用グリフにフォールバックしてしまいます。

前提条件

コードに触れる前に、以下の3つが必要です。

ステップ・バイ・ステップ: favicon for android add to home screenを設定する

1. ソースアートワークから2つのアイコンサイズを書き出す

Android Chromeは、インストールダイアログ用に192×192のアイコンを、ショートカット追加後に短時間表示されるスプラッシュスクリーン用に512×512のアイコンを推奨しています。両方をPNGとして書き出してください。W3Cのmanifest仕様では、これらをpurpose: 'any'アイコンにおける2つの必須sizes値と定めています。正式なスキーマについてはW3C Web App Manifest: icons memberを参照してください。

2. アダプティブランチャー向けのmaskableバリアントを作成する

Androidのランチャーは、デバイスに応じて正方形のアイコンを円形、スクワークル、角丸四角形にクロップします。一般的な512×512のPNGでは、角が切り取られてしまいます。maskable版を作成してください。メインのアートはキャンバス中央の80%をカバーするセーフゾーン内に配置し、残りの20%はランチャーが詳細を損なうことなくクロップできる透明なパディングとして機能します。

icon-maskable-512.pngというファイル名で保存してください。セーフゾーンの計算方法の詳細は、maskableアイコンのガイドをご参照ください。

3. manifest.jsonを作成する

サイトルートに配置し、パスは適宜調整してください。

{
  "name": "Your App Name",
  "short_name": "Short",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

purposeフィールドが、favicon for android add to home screenの見た目の鮮明さを左右する重要な差分です。manifest仕様では、標準アイコン用に'any'を、ランチャーのクロップに耐えるよう設計されたアイコン用に'maskable'を定義しています。

4. 全ページからmanifestへリンクする

ユーザーがインストールする可能性のあるすべてのページのHTML head内に<link>タグが存在しなければ、Android Chromeはmanifestを検出できません。以下を追加してください。

<link rel='manifest' href='/manifest.json'>

favicon宣言の隣に配置してください。bodyタグの中には置かないでください。ブラウザは、headのパース完了後に見つかったlinkタグを無視します。

5. アドレスバーの色を一致させるためtheme colorを設定する

headを編集しているついでに、一致するtheme colorを追加しておきましょう。ホーム画面から起動した際にChromeの上部バーがその色で染まります。

<meta name='theme-color' content='#000000'>

6. 実際のインストールフローをテストする

物理デバイスのAndroid Chromeでサイトを開いてください。三点メニューを表示し、「ホーム画面に追加」をタップします。ダイアログのプレビューにアルファベットやスクリーンショットではなく、192×192のアイコンが表示されているはずです。確認してランチャーをチェックしてください。重要なディテールがクリップされることなく、アイコンがそれぞれの形状を埋めているはずです。

間違ったアイコンが表示された場合は、次のセクションをご覧ください。

Android特有のあるある落とし穴

作業の検証

オンラインのfaviconチェッカーを使って、manifestが解析可能でPNGがHTTPSで配信されていることを確認してください。Mzu favicondlを使えば、192×192と512×512の両方のPNGを単一のソースファイルから書き出し、対応するmaskableバリアントも生成できるため、Figmaでの手作業が省けます。次に少なくとも1台のPixel端末と1台のSamsung端末でインストールフローを確認してください。ランチャーのシェイプは端末ごとにかなり異なるため、maskableバリアントが重要である理由がよくわかります。

favicon for android add to home screenの設定は、192×192エントリ、512×512のmaskableエントリ、および各ページの<link rel='manifest'>タグを備えた、適切に宣言されたmanifest.jsonに尽きます。maskableバリアントを省略するとアイコンがクロップされます。manifest自体を省略すると、Androidはページのスクリーンショットを撮ってしまいます。この3つのファイルを正しく用意すれば、ユーザーのホーム画面に表示されるショートカットが、まるでそこに属しているかのように見えるはずです。