PWAアイコンが変わらない：マニフェスト、画像パス、キャッシュの確認
PWAアイコンの更新問題を切り分けます。公開したマニフェストと画像の応答、実寸、既存インストールのキャッシュを確認し、faviconとの違いを調べましょう。
PWAのアイコンが更新されないときは、ブラウザーが実際に受け取るマニフェストと画像URLから調べます。タブのfaviconを変えても、インストール済みアプリのアイコンが同時に変わるとは限りません。宣言やキャッシュが別だからです。
favicon・PWAジェネレーターは画像と初期マニフェストを用意します。サイトへ配置するときは、マニフェスト内のパスを公開するファイルの場所に合わせてください。
イラスト：独自の生成概念図です。画面、顧客成果、プラットフォーム検証の記録ではありません。
タブの画像とインストール後の画像を分ける
HTMLのfavicon宣言はブラウザーのタブ用です。一方、マニフェストのアイコン項目はウェブアプリの画像を説明します。そのため、ページのタブは新しい絵でも、既存のショートカットが以前の絵を使うことがあります。
問題が出る場所を記録してください。タブ、インストールの案内、アプリ一覧、インストール済みアプリでは調べる対象が違います。ブラウザーとOSも記録すれば、「画像がおかしい」という報告を再現可能な確認にできます。
ページが参照するマニフェストを開く
ページのマニフェストリンクを確認し、そのURLを直接開きます。意図したJSONが返るかを調べてください。ログイン画面、繰り返すリダイレクト、サイト共通のHTMLが返るなら、エディター内のJSONが正しくても公開先は問題を抱えています。
現在のジェネレーターはWeb/site.webmanifestとandroid-chrome-192x192.png、android-chrome-512x512.pngを出力します。初期マニフェストはルートからの画像パスを使います。別ディレクトリーへ置くなら、その場所に合わせて参照を書き換えます。
先頭が/のパスは、ページのフォルダーではなくオリジンのルートから始まります。サブディレクトリーで動くアプリでは、意図した場所に解決されるか特に確認してください。
各画像URLをたどり、実際の応答を見る
MDNのマニフェストアイコン資料は、src、sizes、type、purposeの役割を説明しています。相対パスはマニフェストのURLから解決され、/から始まるパスはオリジンのルートから解決されます。
宣言した画像をそれぞれ開き、応答を確認します。URLが.pngで終わっても、エラーページは有効な画像ではありません。ローカルで開けるファイルが、公開先に含まれていない場合や、画像ポリシーに阻まれる場合もあります。
宣言した寸法と画像の実際のピクセル数も比較してください。生成後にサイズを変えた場合は、マニフェストの項目も更新します。ファイル名に192や512が入っているだけでは、その大きさの証拠になりません。
図柄が対応する用途だけを宣言する
現在の書き出しは通常のアイコン用です。別途検証したmaskable画像を自動生成するものではありません。既存画像へpurpose: "maskable"を加えても、構図や安全領域が作り直されるわけではありません。
maskable素材が必要なら、その用途に合わせて描き、対象の切り取りを確認します。必要に応じて通常アイコンも残します。サイズガイドで手持ちの出力を整理し、想定するブラウザーのインストール要件を調べてください。
ブラウザで確認したmanifestとアイコンの例
2026年10月1日に、現在の出力manifestとアイコンを含む独自のローカルテストサイトをChrome 154で開きました。manifestは 200、application/manifest+jsonで応答し、相対指定の start_url と scope はテストサイトのルートに解決されました。両アイコンは 200で取得でき、ビットマップのデコードで 192 × 192と 512 × 512 pxを確認しました。faviconとApple touch iconも別々に確認しています。
展開したディレクトリで次のコマンドを実行し、http://localhost:8892/を開きます。ファイルをサブディレクトリへ移す場合は、ルート相対のアイコンURLを調整してください。
python3 -m http.server 8892 --bind localhost解析、応答、画像のデコードを確認した記録です。インストールの案内イベントや完了は確認されず、standaloneはfalseでした。maskable素材やservice workerは含まれないため、実際のインストールは別途検証してください。
データを消す前にブラウザーで調べる
ブラウザーのアプリやマニフェストの検査画面を開きます。読み込まれた内容、画像のプレビュー、取得エラーを見て、ネットワーク上のJSONと画像も調べます。誤ったURLと古いキャッシュ応答を区別するためです。
消してよいテスト用インストールなら、新しい素材を確認した後に削除して再インストールできます。サイトデータも消す場合、アプリ内のローカル情報が失われる可能性があります。実ユーザーのデータを一括削除する前に、対象を絞った確認を行ってください。
バージョンを付けた安定した画像URLは、公開とキャッシュの対応を追いやすくします。参照を更新し、どの版をインストールしたかを残します。毎回ランダムなURLを発行するより、固定したバージョンを扱う方が調査しやすくなります。
インストールを別の手順として確認する
MDNのPWAインストールガイドは、画像以外の条件も説明しています。アイコンの書き出しだけで、すべてのブラウザーやOSにインストールできるサイトになるわけではありません。
管理できるテストサイトと実際の公開マニフェストを、対象ブラウザーで試します。JSONと画像が取得され、インストール後に意図した図柄が使われるかを記録してください。デスクトップ確認を、スマートフォンのインストール確認として報告しないようにします。
Safariでの実際のインストール
2026年10月2日、同じテストサイトを隔離したiPhone 17シミュレーターのiOS 26.5 Safariからホーム画面に追加しました。「Webアプリとして開く」は有効でした。My Appには元のXY図案が表示され、タップするとSafariのアドレスバーがない独立したWebアプリでサイトが開きました。この結果はローカルSafariの手順を確認したもので、Chromiumでのインストール、オフライン対応、実機の動作を証明するものではありません。
AppleのSafari操作説明に沿ってサイトを開き、その他 → 共有 → ホーム画面に追加を選びます。Webアプリとして開くを有効にしたまま追加し、新しいアイコンから図案と移動先を確認します。テストサイトには引き続きservice workerや専用のmaskable図案はありません。
PWAアイコンのよくある質問
タブだけ変わり、インストール済み画像が変わらないのはなぜですか？
faviconとマニフェストを別々に確認し、既存インストールのキャッシュを調べます。faviconが新しくても、マニフェストが別画像を参照していることがあります。
マニフェストに合わせてファイルを改名するだけで直りますか？
名前は合わせられますが、画像の形式と寸法も確認してください。改名は画像変換やリサイズではありません。
すべてのブラウザーで同じ見た目になりますか？
インストール画面や対応する用途は異なります。1つのプレビューですべてを確認できたと考えず、対象端末で試します。
繰り返せる確認を残す
マニフェストを開き、画像参照をたどり、実ファイルを確認した後で新しいテストインストールを試します。素材が必要ならPWAジェネレーターから準備できます。
その他の投稿
エンブレム型ロゴの作り方：小さくても読めるバッジを設計する
枠、名前、中心の図柄を整理してエンブレムを作ります。円と盾、小さな表示、透明度、PNGとSVGの違いを比べ、用途に合うファイルを準備しましょう。
YouTubeロゴの歴史：2017年の改版と小さな画面での役割
公式記録があるYouTubeの2017年改版を読み、名前とコンパクトな図柄の役割を考えます。独自のチャンネル用ロゴ、丸いアバター、透かしを確認する練習につなげましょう。
iOSとAndroidのアプリアイコン：元画像、マスク、書き出しの違い
iOSとAndroidのアイコン素材を比較します。Xcodeのアセットカタログ、アダプティブレイヤー、安全領域、Google Play用画像を区別して準備しましょう。
ニュースレター
最新情報を受け取る
最新のアプリデザインのヒントやアイコントレンドを受信トレイにお届けします。