Search code examples
flutterdartmobile-safarifavicon

Flutter web change favicon on iOS Safari

I build a Flutter Web Application which is working fine. I changed the favicon, which is also working perfectly fine. There is only one issue:

enter image description here

How do I change the icon for Safari on iOS?

This is my index.html:

<!DOCTYPE html><html><head>
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A portfolio app.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="'Hi, I\'m Chris.'">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <meta name="theme-color" content="#222527">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png">

  <title>Hi, I'm Chris.</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer=""></script>
  <link rel="stylesheet" type="text/css" href="splash/style.css">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <script src="splash/splash.js"></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
  </script>


</body></html>

This line:

<link rel="apple-touch-icon" href="icons/Icon-192.png">

is linking to the desired icon, I don't have the flutter icon anywhere.

Let me know if you need any more info.

Solution

  • This line is also responsible for icon:

    <link rel="icon" type="image/png" href="favicon.png">

    Make sure you replaced both. You can also try to flush your local cache - Safari could cache icon, so now you cannot see the change.

    You may also try this website to check and improve your icon:

    https://realfavicongenerator.net/