こんにちは、おじゃちです。
検証用の実験場「PWA LAB」で、ホーム画面追加時の挙動をガリガリ検証できるように、manifest.jsonのアイコン先URLを自由に変更できる機能を作ったんですよ。
目的はシンプル。「実際にホーム画面にアイコンが追加された時、どう見えるかをリアルタイムで試せる場所が欲しかったから」。
PWAの検証って、こういう地味で小さな実験の積み重ねがめちゃくちゃ大事なんですよね。特にAndroidとiPhoneじゃ、maskableアイコンの仕様のせいで、丸型や角丸の切り抜きで見え方が180度変わっちゃったりするし。
仕様書を100回読むより、実機で1回コードをぶっ壊してみた瞬間にすべてを理解する。開発者なら誰しもそんな経験、ありますよね。
今回もまさにそれでした。
結論から言うと、ただのURLの入力ミスです。
でも、そのポンコツな一歩のおかげで、iPhoneのホーム画面アイコンに関する「え、Appleそんなことしてたん！？」っていう、最高に面白い挙動を見つけてしまったのでシェアします。
正常系じゃ絶対に見えない「あえて壊した状態」を検証する
今回やったことはめちゃくちゃシンプルです。
自作の「PWA LAB」を使って、あえて「サーバー上に存在しない、完全にデタラメなURL」をインストール先として指定しました。
その状態で、Android（Chrome）とiPhone（Safari）の両方で「ホーム画面に追加」をポチってみたんです。
気になったのはこのあたり。
- そもそも存在しないURLのままホームにぶち込めるのか？
- アイコン画像が404で取得できない時、OSはどう誤魔化すのか？
manifest.jsonに書いた設定は、どこまでOSに無視され、どこまで拾われるのか？- AndroidとiOSの「思想の差」はどう出るのか？
普段は綺麗なアイコンと正しいURLでしか検証しないからこそ、あえてド派手に壊してみる。すると、OSが必死に裏側でやっている「フォールバック（代替処理）」の素顔が丸裸になるわけです。
【Android】「規律の鬼」Chrome先生には門前払いされた
まずはAndroid（Chrome）から。
予想はしていましたが、存在しないURLを指定した状態だと、そもそもインストールボタンすら押させてくれませんでした。「アプリとして成立してないんで、お引き取りください」とバッサリ。
いや、めちゃくちゃ健全で正しい挙動なんですけどね。
PWAとしてホーム画面に鎮座させる以上、起動先のURLがちゃんと生きてなきゃ意味がない。Android Chromeはそのあたりのバリデーションがかなり厳格です。
つまりAndroidの脳内としては、
「このURL、アプリとして起動できないからPWAの資格なし！却下！」
っていう判断。Web技術をベースに、いかに「本物のネイティブアプリ」としてユーザーに体験させるか、というGoogleらしい生真面目な思想がバキバキに伝わってくる。
👉 PWAのキャッシュ戦略を完全に理解する：Cache First / Network First / Stale-While-Revalidate を初心者向けに解説 の解説が役に立ちます。
【iPhone】「おもてなしの鬼」Safari先輩は力技でねじ込んできた
で、大本命のiPhone（Safari）です。ここからが最高にゾクゾクしたところ。
なんとiPhone、存在しないURLを指定していても、何事もなかったかのように「ホーム画面に追加」できちゃいました。 Androidみたいに手前で止めてくる冷たさは一切ありません。
ただ、当然ながらアイコン画像（PNG）は404で取得できません。
「じゃあどうなるの？」と思ったら、iPhoneがその場で「それっぽい仮のアイコン」をシュッと自動生成してホーム画面に爆誕させたんです。
しかもその自動生成のロジックを観察していたら、3つの驚くべき発見がありました。
発見1：死んでると思ってた theme_color が、こんなところで息を吹き返した
フロントエンドの人間なら共感してくれると思うんですが、iPhoneにおける manifest.json の theme_color って、今まで「ほぼ死にステータス（意味ない項目）」だと思ってたんですよ。
Androidなら、ブラウザのツールバーやヘッダーの色にパッと反映されて超気持ちいい。でもiPhoneだと、PWAを起動してもそこまで分かりやすく効いてる実感が湧かない。
ところが今回、アイコン画像が全滅したことで、Appleが用意した裏ルートが見えました。自動生成された仮アイコンの背景色が、theme_color で指定した色に染まったんです。
theme_colorを赤にすれば、赤系の背景theme_colorを青にすれば、青系の背景theme_colorを緑にすれば、緑系の背景
普段は100%オリジナルのアイコン画像を設定しちゃうから絶対に気づけなかったんですが、アイコンがロストした時、iPhoneは theme_color を引っ張り出してきて「背景の座布団」に仕立て上げていたんです。「お前、そこで仕事してたのか…！」って、脳汁が出ましたね。
発見2：デザインに困ったら「とりあえず頭文字」というApple流おもてなし
次に「文字」の扱いです。
アイコン画像が取れないとなると、iPhoneはサイト名（タイトル）から先頭の1文字を自動で抽出し、アイコンのど真ん中にドンと配置しました。
例えば、サイト名が『おじゃちのブログ』だったら、アイコンの中心には綺麗なフォントで
お
とだけ表示される。
これが悔しいくらいに悪くない。というか、ミニマルなアプリのロゴっぽくて普通におしゃれなんですよ。
Appleとしては、「アイコン画像が404だからって、ホーム画面にダサいNO IMAGE画像や白紙のアイコンを並べさせるわけにはいかない」という、ブランドのプライド（執念）を感じます。
発見3：まさかの「絵文字一発」で最強のミニマルアイコンが完成する
さらに悪ノリして実験を続けていたら、もっと面白いことに気づきました。
タイトルやサイト名の先頭に「絵文字」を仕込んでおくと、文字の代わりにその絵文字が1発でアプリアイコン化します。
例えば、サイト名を
😀 PWA LAB
とすると、ホーム画面アイコンには
😀
がドカンと入ったアイコンが出来上がります。
さらにはこんな絵文字や記号も可能！
🤩
🦥
🌸
🍎
このあたりを試してみても、全部バッチリ透過していい感じのアイコンになりました。
URLをミスっただけのデバッグのはずが、途中から「どの絵文字が一番アプリアイコンとして映えるか選手権」っていう完全な遊びに変わってました（笑）。でも、こういう予期せぬ挙動に出会えるから個人開発の実験は裏切らない。
思想のぶつかり合い：Androidは「アプリ」を作り、iPhoneは「オブジェクト」を置く
今回の挙動の違いを深掘りすると、両OSのPWAに対する圧倒的な「思想の差」が透けて見えておもしろいです。
| OS | 壊れたURLへの対応 | アイコンがない時 | 根底にある思想 |
|---|---|---|---|
| Android | 追加すらさせない（エラー） | インストール不可 | 「Webサイトを厳格なアプリに格上げする」 |
| iPhone | 構わずホーム画面にねじ込む | 綺麗に自動生成する | 「Webページをホーム画面のパーツとして美しく飾る」 |
Androidはどこまでも論理的。構造が破綻しているものはアプリとして認めない。
対するiPhoneはどこまでも情緒的。たとえ中身のリンクが死んでいようがアイコンがなかろうが、「ユーザーのホーム画面の美しさを損なわないこと」を最優先して、力技でそれっぽいオブジェクトに仕立て上げる。
このディテール、仕様書だけを睨みつけていても一生気づけなかったポイントです。
【業務連絡】だからといってアイコンをサボっていいわけじゃない（笑）
今回の発見はデザイナー・開発者としてめちゃくちゃ知的好奇心を刺激されましたが、「じゃあこれからはアイコン作らなくていいや！」とは絶対にしないでください（笑）。
当然ですが、本番環境では100%ちゃんと画像を用意すべきです。
特にiPhoneは apple-touch-icon のキャッシュ指定がガチガチに強いので、基本に忠実に専用のPNGをマークアップに仕込んでおくのが大正義。
Android向けにも、manifest.json にしっかり512×512のPNGを記述して、マスク対応（any maskable）を仕込んでおくのが定石です。
今回の自動生成アイコンは、あくまで「事故った時でも、Apple側が全力で見栄えをカバーしてくれる最後の保険」。本番の打席をこの保険に丸投げするのはNGです。
関連記事
PWAに必要なmanifest.jsonの基本は、PWAに必要なmanifest.jsonの基本｜iPhoneとAndroidで効く項目を実験ベースで解説でまとめています。
iPhoneでPWAがどこまで使えるかは、PWA×iOSでできること完全まとめ【2026年版】も参考になります。
iPhoneとAndroidのPWA思想の違いは、iOSとAndroidではPWAのゴールが違うで整理しています。
まとめ：仕様を「壊す」ことでしか見えない世界がある
狙って書いたコードが動くのは当たり前。でも、「盛大にやらかしたコードを、OSがどう必死に介護しているか」を見ることで、初めてAppleやGoogleの開発者が仕込んだニクい演出や親切心に気づくことができます。
今回、ただのURLのタイポから始まった実験でしたが、
- iPhoneはアイコンが無くてもホーム画面の見た目を全力で成立させにくる
- 息をしていないと思われた
theme_colorが、フォールバックの背景色として裏で現役で動いていた
という、フロントエンドにちょっと自慢したくなる知見が手に入りました。
PWA LAB、こういう一見無駄に見える「バグらせ実験」が気軽にできるから本当に楽しい。
「教科書通りの実装に飽きたな」というWebデザイナーや開発者の方は、たまには自分のPWAのアイコン設定を全部消し飛ばして、iPhoneがどんなおもてなしアイコンを生成してくれるか、イタズラ心で試してみてはいかがでしょうか？
思わぬ挙動に、きっとニヤリとできるはずです。
