Rork でアプリのブランドを刷新しようと新しいアイコンを差し替えたのに、ビルドして実機やシミュレータで開いても古いアイコンのままになっている — これは Rork で開発を続けていると、ほぼ全員が一度はぶつかる症状です。私自身、新しいアプリをリリースする度にこの落とし穴に何度も足を取られてきました。
厄介なのは、アイコンが更新されない原因が複数のレイヤーに分散していることです。Expo の設定、EAS Build のキャッシュ、iOS の SpringBoard キャッシュ、Android のアダプティブアイコン未対応など、どれか一つでも引っかかると古いアイコンが残り続けます。ここでは原因のレイヤーごとに「まず試すこと」と「それでもダメなときの最終手段」を整理してお届けします。
症状の切り分け — どのレイヤーで止まっているか確認する
闇雲に対処する前に、現象がどのレイヤーで起きているのかを切り分けると最短で解決できます。
- シミュレータでは新アイコンが出るが、実機では古い → デバイス側のキャッシュ問題
- EAS Build でビルドした成果物にも古いアイコンが入っている → ビルドキャッシュまたは
app.jsonの設定ミス - iOS は新しくなったが Android が古いまま → アダプティブアイコンの未設定
- EAS Update(OTA)した瞬間からアイコンが消えた → そもそも OTA ではアイコンは差し替えられません(後述)
最初の30秒でこの切り分けをするだけで、続く作業の方向性が大きく変わります。
まず試すべき基本対処(70% はこれで解決します)
経験上、アイコン更新トラブルの大半は次の3ステップで解消します。
# 1. アプリを完全削除して再インストール
# iOS シミュレータの場合
xcrun simctl uninstall booted com.example.yourapp
# Android エミュレータの場合
adb uninstall com.example.yourapp
# 2. EAS Build のキャッシュをクリアして再ビルド
eas build --platform ios --clear-cache --profile preview
eas build --platform android --clear-cache --profile preview
# 3. ローカルでプレビルドする場合は --clean を付ける
npx expo prebuild --clean期待する結果は、--clear-cache を付けたビルドが完了したあとに新インストールしたアプリに新しいアイコンが反映されていることです。シミュレータの場合は「Device → Erase All Content and Settings」でクリーンな状態に戻すのも有効です。
特に iOS の SpringBoard はアイコンを驚くほど執拗にキャッシュするため、アプリをアンインストールしてもアイコン画像が残ることがあります。その場合はデバイスの再起動が一番確実です。
app.json / app.config.js の正しい書き方
Rork が生成するプロジェクトでも、アイコン関連の設定は標準的な Expo の流儀に従います。設定漏れはここで起きやすいので、現在の状態を必ず確認してください。
{
"expo": {
"name": "Your App",
"icon": "./assets/icon.png",
"ios": {
"icon": "./assets/icon-ios.png",
"bundleIdentifier": "com.example.yourapp"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon-foreground.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.example.yourapp"
}
}
}ここで重要なのは、Android の adaptiveIcon を省略しないことです。adaptiveIcon を設定していないと、Android 8.0 以降の端末では Expo のデフォルトアイコンが使われ続けることがあります。foregroundImage は 1024×1024 のうち中央 66% にロゴを配置するのが安全です(端末によっては円形・角丸・しずく型など様々な形状にマスクされるため、外周 17% は安全領域として空けておくのが鉄則です)。
iOS 固有の罠 — SpringBoard と TestFlight のキャッシュ
iOS には開発者を泣かせるアイコンキャッシュが2層あります。
- SpringBoard のキャッシュ: ホーム画面に表示されるアイコンは SpringBoard が独立してキャッシュしています。アプリを削除してもアイコン画像のキャッシュが残ることがあるため、デバイスの再起動が必要です。
- TestFlight のキャッシュ: TestFlight でビルドを配信したあと、アイコンが古いまま見えることがあります。これは TestFlight アプリ側のキャッシュで、TestFlight アプリ自体を一度削除して入れ直すと解消します。
App Store 提出版でもこの問題は起きます。新しいバージョンが公開されてもしばらく古いアイコンが見えることがありますが、これは Apple 側の CDN キャッシュなので時間が解決します(最長で24時間ほど)。リジェクト関連の対処はアプリストア審査リジェクト時の対処法にまとめていますので、合わせて確認してみてください。
Android 固有の罠 — アダプティブアイコンと密度バリアント
Android のアイコン更新で詰まる場合、原因のほぼすべてはアダプティブアイコンです。
foregroundImageだけ更新してbackgroundColorを変えていない: Android 8.0+ では両方を組み合わせて表示されるため、片方だけだと違和感が残ります。- モノクロアイコン(
monochromeImage)を未設定: Android 13+ のテーマアイコン機能に対応するには別画像が必要です。 - 古い
mipmap-*ディレクトリの画像が混在している:npx expo prebuild --cleanでandroid/ディレクトリを再生成するのが確実です。
参考までに、私はアダプティブアイコンの画像生成に Figma のテンプレートを使っています。「safe zone」と書かれた円形ガイドが描かれたフレームに合わせるだけで、どんな端末形状でも見切れない画像が一発で作れます。
EAS Update(OTA)ではアイコンは更新されません
これは見落としがちな仕様ですが、EAS Update(旧 expo-updates)では JavaScript バンドルとアセットの一部しか配信されず、アイコン・スプラッシュスクリーン・ネイティブモジュールは配信対象外です。アイコンを変更したら必ず新しいネイティブビルドが必要です。
「OTA を流したのに反映されない」と悩んでいる場合、まず eas build で新規ビルドしているかを確認してください。EAS Update の挙動についてはEAS Update(OTA)アップデートの実装ガイドで詳しく扱っていますので、合わせて読むと挙動が腑に落ちると思います。
それでも反映されない時の最終手段
ここまで試して反映されない場合は、ネイティブビルドの深いキャッシュを疑います。
# iOS: Xcode の DerivedData を削除
rm -rf ~/Library/Developer/Xcode/DerivedData
# Android: Gradle のキャッシュを削除
cd android && ./gradlew clean && cd ..
# 念のため node_modules も再構築
rm -rf node_modules ios android
npm install
npx expo prebuild --clean
# その上で再ビルド
eas build --platform all --clear-cacheここまでやれば、ほぼ確実に新しいアイコンが反映されます。スプラッシュスクリーンが白く点滅して気になっている方は、スプラッシュスクリーンの白フラッシュ問題の対処法も参考になるかもしれません。
アイコン更新は地味なテーマですが、ここでつまずくと App Store Connect への提出が遅れてしまい、リリーススケジュールに直接響きます。今日この記事を読んだら、ご自身のプロジェクトの app.json を一度開いて、adaptiveIcon がきちんと設定されているか確認してみてください。それだけで、次回のアイコン差し替えがぐっとスムーズになるはずです。