title: Web app manifest: Downloaded file was empty or corrupted
body: <p>I am developing a web app with react and want to include my own icon as icon I can click on my iPhone home screen (after clicking "Add to home screen in Safari"). You can find a Beta version here: <a href="https://konekto-5gtxy7fpu.now.sh/" rel="nofollow noreferrer">https://konekto-5gtxy7fpu.now.sh/</a></p>
  
  <p>I have googled and tried different options for hours but could not fix the problem. Thus, I am looking for your support.</p>
  
  <p>The following is the relevant snippet from the index.html file:</p>
  
  <pre><code>&lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json" /&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;meta name="apple-mobile-web-app-title" content="Konekto" /&gt;
  
  &lt;link rel="apple-touch-icon" href="%PUBLIC_URL%/_icons/apple-icon.png" /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/_icons/apple-icon-57x57.png"
    sizes="57x57"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-60x60.png"
    sizes="60x60"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-72x72.png"
    sizes="72x72"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-76x76.png"
    sizes="76x76"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-114x114.png"
    sizes="114x114"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-120x120.png"
    sizes="120x120"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-128x128.png"
    sizes="128x128"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-144x144.png"
    sizes="144x144"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-152x152.png"
    sizes="152x152"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-180x180.png"
    sizes="180x180"
  /&gt;
  &lt;link
    rel="apple-touch-icon"
    href="%PUBLIC_URL%/icons/apple-icon-precomposed.png"
  /&gt;
  
  &lt;link
    rel="icon"
    type="image/png"
    sizes="32x32"
    href="%PUBLIC_URL%/favicon-32x32.png"
  /&gt;
  &lt;link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="%PUBLIC_URL%/favicon-16x16.png"
  /&gt;
  &lt;link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" /&gt;
      &lt;link
        rel="mask-icon"
        href="%PUBLIC_URL%/safari-pinned-tab.svg"
        color="#5bbad5"
  /&gt;
  </code></pre>
  
  <p>The Manifest.json file looks as follows:</p>
  
  <pre><code>{
    "short_name": "Konekto",
    "name": "Konekto Emergency App",
    "icons": [
      {
        "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
      }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#ffffff",
    "background_color": "#ffffff"
  }
  </code></pre>
  
  <p>I have set up the icons as follows:
  <a href="https://i.stack.imgur.com/Xd63X.jpg" rel="nofollow noreferrer">root directory</a>
  <a href="https://i.stack.imgur.com/zfUXF.jpg" rel="nofollow noreferrer">frontend_mpd/public/icons/</a></p>
  
  <p>Thus, I would expect the right icon to be shown on the home screen when newly adding it to the iPhone homescreen, but only a screenshot of the app is shown and in the Chrome developer mode -> Application->Installability following is shown: "Downloaded icon was empty or corrupted".</p>
  
  <p>When running it locally, following is shown: <a href="https://i.stack.imgur.com/EtObS.jpg" rel="nofollow noreferrer">App Manifest Local</a></p>
  
  <p>Thank you very much for your help!</p>