AndroidのChromeで「ホーム画面に追加」がインストールになる問題
前提と課題
- 前提1：AndroidのChromeに「ホーム画面に追加」機能がある。
- 前提2：それはホーム画面に「ショートカット」ができることを期待する。
- 課題：しかし、「ショートカット」にはならず「インストール」扱いになる。
ウェブ制作者側が「インストール扱いにしてほしい」場合はPWAに対応させます。しかし、それを設定しなくても一定の条件下でインストール扱いになります。ウェブ制作者としては困った状況だと感じています。
今回は、この条件を調べ、インストールにならない対処方法も考えました。
インストール扱いになる条件
明確な仕様を見つけられなかったため、実機で検証しました。下記の条件のときに「インストール」扱いになるようです。
- Android端末である
- 最新のChromeである（2025年8月現在）
- httpsのサイトである
- シークレットモードではない
以下、faviconのサイズとURLによって「ショートカット」か「インストール」か変わるようです。
※linkなりなしの表記は <link rel="icon" href="/favicon.ico"> のコードのありなしを意味し、なしの場合はルートディレクトリにfavicon.icoを配置している前提です。
| favicon.icoのサイズ | example.com/ + linkなし | example.com/ + linkあり | example.com/blog + linkなし | example.com/blog + linkあり | example.com/blog/page + linkあり |
|---|---|---|---|---|---|
| 24px | ショートカット（アイコンなし） | ショートカット（アイコンなし） | ショートカット（アイコンなし） | ショートカット（アイコンなし） | ショートカット（アイコンなし） |
| 32px | ショートカット（アイコンなし） | ショートカット（アイコンなし） | ショートカット（アイコンなし） | ショートカット（アイコンなし） | ショートカット（アイコンなし） |
| 48px | ショートカット（アイコンなし） | インストール | ショートカット（アイコンなし） | インストールとショートカットの選択 | ショートカット（アイコンなし） |
| 64px | ショートカット（アイコンなし） | インストール | ショートカット（アイコンなし） | インストールとショートカットの選択 | ショートカット（アイコンなし） |
| 128px | ショートカット（アイコンあり） | インストール | ショートカット（アイコンあり） | インストールとショートカットの選択 | ショートカット（アイコンあり） |
| 256px | ショートカット（アイコンあり） | インストール | ショートカット（アイコンあり） | インストールとショートカットの選択 | ショートカット（アイコンあり） |
だいたいのサイトは上記のルールなのですが、このルールが適用されない（または少しズレてる）サイトもあります。もう少し細かなルールがあるのだと思うのですが、そこまでは分かりませんでした。以前、あるタイミングでインストールを促されていた気がするのですが、それを考えるとユーザーのエンゲージメントと関わりがあるのでしょうか。
<link rel="icon" href="/favicon.ico"> のコードがあると、faviconのサイズが大きい場合にインストールになります。しかしそれもURLによって変わります。https://example.com/ と https://example.com/index.html は挙動が違うので注意してください。前者はインストールだけですが、後者はインストールまたはショートカットが選択できます。
結論：Chromeの仕様
ということでChromeの仕様のようです。「ホーム画面に追加」の仕様変更というよりも、「PWA扱いもしくはインストール扱い」になる条件が変わったと捉えたほうが正確かもしれません。
後述の参考記事を見るかぎり、上記の条件以外にもありそうですが。
どのバージョンからか
どのChromeのバージョンでこの仕様になったかは分かりません。バージョン125（2024年5月）と138（2025年8月）では確認しました。バージョン141（Chrome Canary）でも確認。古いバージョン74では確認できませんでした。2023年くらいは別の仕様だったので、ここ2年くらいでのことだと思います。
apple-touch-iconを設定するとどうなるか
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> を入れた場合。
こちらはきちんと検証していませんが、少なくとも両方の画像が32px（以下）だった場合、ショートカットになります。片方が48px以上だった場合、AndroidのChromeのlinkありのURLの法則のとおり、example.com/ ならばインストール、example.com/blog ならばインストールとショートカットの選択、example.com/blog/page ならばショートカットになります。おそらく、アイコンのあるショートカットはできません。
条件の分岐は、通常のブラウジング用とAndroidのChromeのホーム画面追加用に favicon.ico を使い、iPhoneでホーム画面追加用に apple-touch-icon.png を使うようです。どちらもコードにアイコンの場所を記述しなくても自動で読み取りにいきます。iPhoneは、SafariでもChromeでも同じ挙動をします（どちらも中身がChromiumではない）。
対処方法
インストール扱いにしたくない場合の対処法を2つ考えました。
対処方法① manifestファイルを用意する
<link rel="manifest" href="/manifest.json">
{
"display": "browser",
"icons": [
{
"src": "/apple-touch-icon.png",
"sizes": "128x128",
"type": "image/png"
}
]
}
manifest.jsonファイルをルートディレクトリに配置し、全ページからlink要素で読み込む方法です。ファイルの中身に"display": "browser"を記述して、インストールをまぬがれます。<link rel="icon" href="○○"> と <link rel="apple-touch-icon" href="○○"> は記載してもしなくても構いません。sizesも近しい値に変えて大丈夫です。
デメリットは、堅牢性がないことです。MDNの説明に記述されている必須マニフェストメンバーを記述していない状態です（入れてもいいのですが、入れてしまうとブックマーク時のショートカット名が固定されてしまいます）。また、今後どのように仕様が変わっていき、どこかのタイミングで対応できなくなる可能性はあります。そもそも、ウェブアプリ用の設定ファイルですから、今たまたまブックマークのように機能しているだけの可能性はあります。
pixivがこのような方法をとっています。
対処方法② linkを記述しない
別案は、favicon.ico apple-touch-icon.pngファイルをルートディレクトリに配置する方法です。<link rel="icon" href="○○"> と <link rel="apple-touch-icon" href="○○"> は記載しません。
デメリットは、favicon.icoファイルを大きくすると、Androidでホーム画面に追加時にグラフィカルなアイコンを使用できるが容量が大きすぎます。ページを読み込む際に自動で取得されるものにしては不要な大きさです。一方で、小さなものにするとグラフィカルなアイコンはあきらめることになります。
無印良品がこのような方法をとり、小さいfavicon.icoを設定しています。
まとめ
AndroidのChromeで「ホーム画面に追加」時にインストールになるのは、アイコンのサイズやURLなどによって変わることがわかりました。
対処法は堅牢性の問題もあり、何かをあきらめなければならなさそうです。
favicon.icoとapple-touch-icon.pngをルートディレクトリから自動で読み込んでくれる〝慣習〟が生き続ける可能性は高そうなので、堅牢性を考えると、対処方法②をベースにして場合により①も対応するのがよいのではと考えます。
-
対処方法①（②をベース）
<link rel="shortcut icon" href="/favicon.ico" /><link rel="apple-touch-icon" href="/apple-touch-icon.png" />を記述しない ＆ favicon.icoを48pxにする ＆ manifestファイルを配置する- ✅️不要に重いリクエストを飛ばさなくてよい
- ✅️AndroidのChromeでインストール扱いにならない
- ✅️AndroidのChromeでホーム画面に追加時にアイコンになる
- ✅️iPhoneのChromeでホーム画面に追加時にアイコンになる
- ❌️堅牢性がある（様々なブラウザが将来にわたって同じ動作が保証される可能性が高い）
-
対処方法②-1
<link rel="shortcut icon" href="/favicon.ico" /><link rel="apple-touch-icon" href="/apple-touch-icon.png" />を記述しない ＆ favicon.icoを48pxにする- ✅️不要に重いリクエストを飛ばさなくてよい
- ✅️AndroidのChromeでインストール扱いにならない
- ❌️AndroidのChromeでホーム画面に追加時にアイコンになる
- ✅️iPhoneのChromeでホーム画面に追加時にアイコンになる
- ✅️堅牢性がある（様々なブラウザが将来にわたって同じ動作が保証される可能性が高い）
-
対処方法②-2
<link rel="shortcut icon" href="/favicon.ico" /><link rel="apple-touch-icon" href="/apple-touch-icon.png" />を記述しない ＆ favicon.icoを128px程度（68KB前後）にする- ❌️不要に重いリクエストを飛ばさなくてよい
- ✅️AndroidのChromeでインストール扱いにならない
- ✅️AndroidのChromeでホーム画面に追加時にアイコンになる
- ✅️iPhoneのChromeでホーム画面に追加時にアイコンになる
- ✅️堅牢性がある（様々なブラウザが将来にわたって同じ動作が保証される可能性が高い）
-
一般的な方法
<link rel="shortcut icon" href="/favicon.ico" /><link rel="apple-touch-icon" href="/apple-touch-icon.png" />を記述する- ✅️不要に重いリクエストを飛ばさなくてよい
- ❌️AndroidのChromeでインストール扱いにならない
- ✅️AndroidのChromeでホーム画面に追加時にアイコンになる
- ✅️iPhoneのChromeでホーム画面に追加時にアイコンになる
- ✅️堅牢性がある（様々なブラウザが将来にわたって同じ動作が保証される可能性が高い）
SVGのアイコンについては今回は検証していません。古いブラウザへの考慮も、プログレッシブ・エンハンスメントの考え方であれば問題ないでしょう。
今後も仕様の変更などあると思うので、深く考えず変更を戦略的に受け入れるのもありだと感じています。
というか、そもそも「ホーム画面に追加」機能をブックマーク（ショートカット）として機能させたいという考え方自体がおかしいのですかね。分からなくなってきました。
補足ですが、いちユーザーとしてこのようなサイトに出会った場合、ブラウザのメニューにある「ダウンロード」アイコンをタップしてウェブページをダウンロードしたあと「ホーム画面に追加」をするとショートカットが作成されます。
Discussion