App icons (favicon, apple touch icon) missing with Metro bundler for web

[LinusU]

Summary

Icon are no longer included when switching from WebPack to the Metro bundler for web builds.

What platform(s) does this occur on?

Web

SDK Version

48

Environment

  expo-env-info 1.0.2 environment info:
    System:
      OS: macOS 13.2.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
      Yarn: 1.22.19 - /opt/homebrew/bin/yarn
      npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
      Watchman: 2023.02.06.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    IDEs:
      Xcode: 14.2/14C18 - /usr/bin/xcodebuild
    npmPackages:
      @expo/webpack-config: ^18.0.1 => 18.0.1 
      expo: ~48.0.9 => 48.0.9 
      react: 18.2.0 => 18.2.0 
      react-dom: 18.2.0 => 18.2.0 
      react-native: 0.71.4 => 0.71.4 
      react-native-web: ~0.18.10 => 0.18.12 
    npmGlobalPackages:
      expo-cli: 6.0.1
    Expo Workflow: managed

Minimal reproducible example

1. npx create-expo-app@1.3.2 expo-web-icons
2. cd expo-web-icons
3. Add "bundler": "metro", after line 26 in app.json
4. npx expo install react-native-web@~0.18.10 react-dom@18.2.0
5. npx expo export --platform web
6. Observe that dist/index.html doesn't include any icon assets, nor any link elements pointing to icons

[LinusU]

Some related documentation is here:
https://docs.expo.dev/guides/progressive-web-apps/#usage

This is what Expo previously generated for us before the switch, when setting just icon to a large png:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="shortcut icon" href="/favicon.ico">

<link rel="apple-touch-icon" sizes="180x180" href="/pwa/apple-touch-icon/apple-touch-icon-180.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-640x1136.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-1242x2688.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-828x1792.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-1125x2436.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-1242x2208.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-750x1334.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-2048x2732.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-1668x2388.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-1668x2224.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pwa/apple-touch-startup-image/apple-touch-startup-image-1536x2048.png">

(somewhat related, the following meta tags are also missing:

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-title" content="My App Name">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

)

[WKampel]

I have the same issue. Did you find a solution?

[Thomas-Gallant]

I was able to find a solution for this issue that worked for me.
In the root folder of my project, I created a folder called public and put the favicon.ico file in the folder.

Documentation below:
https://docs.expo.dev/guides/customizing-metro/#static-files

Additionally, I was able to successfully override the index.html file by creating a new one inside of the public folder.

[Haseebshah936]

Hi, I am going to built to a PWA for my client but I am confused in picking up the technology for it. I was considering next but I came to know that apple allow PWA built with expo can any of you confirm this as of my previous experience with PWA I was able to get it published on playstore but was not able to get it published with appStore that PWA was built with react and was triggered by a WebView in an expo app. Can any one confirm that the PWA built with expo can be published on apple store?

[EvanBacon]

Favicons are now supported in Expo Metro with SDK 49. The static metatags should be added using the app/+html.js file.

I'm not sure about adding support for the Apple splash screens since PWAs changed significantly and I haven't had time to research the new standard.

[findhumane]

I was just hit by this while migrating from Expo 48 to Expo 50 and switching to Metro. The suggested solution of using app/+html.js doesn't help if one hasn't migrated to Expo Router + web.output: static (this distinction is noted on the PWA page but not on the Metro Migration page), which is a big change that I'm not ready for yet, so what I did is:

1. Build with Webpack and then copy manifest.json and pwa from the web-build directory into the public directory
2. Modify index.html and add in all of the link and meta tags.

Although I'm not sure how to re-generate the PWA images if my logo or splash images ever change.

web-build/pwa
├── apple-touch-icon
│   └── apple-touch-icon-180.png
└── apple-touch-startup-image
    ├── apple-touch-startup-image-1125x2436.png
    ├── apple-touch-startup-image-1242x2208.png
    ├── apple-touch-startup-image-1242x2688.png
    ├── apple-touch-startup-image-1536x2048.png
    ├── apple-touch-startup-image-1668x2224.png
    ├── apple-touch-startup-image-1668x2388.png
    ├── apple-touch-startup-image-2048x2732.png
    ├── apple-touch-startup-image-640x1136.png
    ├── apple-touch-startup-image-750x1334.png
    └── apple-touch-startup-image-828x1792.png

[ginorey]

I'm running into the same error! Were you able to find a solution? @findhumane

[findhumane]

I'm running into the same error! Were you able to find a solution? @findhumane

Just the workaround that I mentioned

[ginorey]

If anyone runs into this error, below is my fix!

added to my metro.config.js
defaultConfig.resolver.assetExts.push('ttf');

app.ts
const [fontsLoaded, fontError] = useFonts({ 'MaterialIcons': require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'), 'Feather': require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Feather.ttf'), 'AntDesign': require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf'), });