ホーム画面に追加したときのアプリアイコン（PWAアイコン）が、iPhoneだけ四隅が黒くなった話
自作のWebアプリをスマホのホーム画面に追加したとき、アプリのアイコンが表示される。いわゆる「ホーム画面に追加したときのアプリアイコン」だ。業界ではこれを PWAアイコン（Progressive Web App アイコン）や apple-touch-icon と呼ぶことがある。
sodatelu（育児記録アプリ）のβ公開に向けてPWA対応を進めていたとき、最初に作ったアイコンをiPhoneのホーム画面に追加してみたら、四隅が黒く塗られた状態になっていた。
「これはダサいな」とは思いつつ、最初のデザインだしあとでなんとでもなるので、そのまま放置していた。今日はその原因と直し方を書いておく。同じことで戸惑う人がいたら参考にしてほしい。
※「PWAアイコン」とは、Webサイト・Webアプリをスマホのホーム画面に追加したときに表示されるアイコンのこと。iOSでは apple-touch-icon、Androidでは manifest.webmanifest で定義したアイコンが使われます。
なぜiPhoneだと四隅が黒くなるのか
原因はシンプルで、最初に作ったSVGが「円形」デザインだったことにある。中央に丸い背景を描いて、その外側（四隅）を透明にしていた。
iOSはapple-touch-iconを「四角いキャンバス」として扱い、透明な部分を黒で塗る仕様になっている。つまり、四隅が透明になっているSVGを渡すと、そこが黒く埋まって表示される。
なお、iOSはOS側でアイコンに角丸処理を施してくれる。だから「角丸に見せたいからSVGを円形にする」という発想は必要ない。むしろ円形にすると四隅が黒く見えてしまうので逆効果だ。
直し方は「全面塗り」にするだけ
対処はとてもシンプルで、SVGの背景を四隅まで全部塗りつぶすだけでいい。
修正前（透明な四隅がある円形SVG）：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!-- 円形の背景（四隅は透明） -->
<circle cx="256" cy="256" r="256" fill="#3b82f6" />
<!-- ロゴなど中央の要素 -->
<text x="256" y="300" text-anchor="middle" font-size="200" fill="#fff">S</text>
</svg>修正後（四隅まで全面を塗りつぶした四角形SVG）：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!-- 四角いキャンバス全体を塗る -->
<rect width="512" height="512" fill="#3b82f6" />
<!-- ロゴなど中央の要素 -->
<text x="256" y="300" text-anchor="middle" font-size="200" fill="#fff">S</text>
</svg><circle> を <rect width="512" height="512"> に差し替えるだけだ。角丸はOSが勝手につけてくれるので、SVG側では四角いままでいい。
修正してもすぐ反映されない場合はキャッシュが原因
SVGを修正してデプロイしたのに、iPhoneのホーム画面では相変わらず黒い四隅のままで変わらない、ということがある。
iOSはmanifestやapple-touch-iconをかなり強くキャッシュする。アイコンを差し替えても、Safariが古いキャッシュを保持しているので画面上は変わって見えない。
反映させるには以下の手順が必要だ。
- ホーム画面のアプリアイコンを長押しして削除する
- SafariでサイトのURLに再アクセスする
- 共有ボタン（□に↑のアイコン）→「ホーム画面に追加」で再登録する
この3ステップを踏まないと、デプロイした最新のアイコンが表示されない。「直したはずなのに変わらない」というときはまずここを試してほしい。
iOSのPWAアイコン仕様まとめ
ポイントをまとめると、こういうことだ。
- iOSはアイコンの透明部分を黒で塗る仕様がある
- 円形SVGを使うと四隅が透明になり、黒く見えてしまう
<circle>を<rect width="512" height="512">に変えて全面塗りにすれば解決する- 角丸はOSが処理してくれるので、SVG側で丸める必要はない
- 修正後に反映しない場合は「ホーム画面から削除 → Safariで再アクセス → 再追加」の3ステップが必要
「ホーム画面アイコンを全面塗りにする」という発想は最初は思いつきにくい。OSが角丸をつけてくれると知っていれば、最初から全面塗りで作れるのだけど。知っていれば5分で済む話なので、PWAを作っている人の参考になれば。