CODEWITHSUNDEEP
iosflutter-webfavicon
Lorenz
Lorenz

Reputation: 55

Fluttwe Webapp Home Screen Icon

Trying to display my Web app Icon on the iPhone Home screen.

When creating a Shortcut from my Home Screen to my Flutter Web App, a screenshot of the app is displayed, not the Favicon.

By short cut I mean on your Iphone in Safari click share Icon > Add to Home-Screen > Add

In index.html I added

  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
  <link rel="icon" type="image/x-icon" href="/favicon.ico"/>
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

Created all images with https://www.favicon-generator.org/ (so they have the right size) and stored them at the root.

The Favicon works in Safari and Chrome and when creating a shortcut from Home screen to Web app on Android the Proper Logo is displayed. But not on IOS, what else do I need to configure.

It's also possible to somehow configure this icon, as you can see if you try adding https://flutter.dev/ to your home screen

Upvotes: 0

Views: 205

Answers (1)

Jonathan Soemer
Jonathan Soemer

Reputation: 26

I suppose you’re working on windows and as a result didn’t build the Web App in Xcode yet.

Had the same issue sometime ago and that fixed it.

Let me know if it worked.

Upvotes: 1

Related Questions