title: actual size (1x1)px of icon does not match specified size (72x72)px | PWA Nuxtjs
body: <p>I am trying to add PWA functionality to an existing Nuxt js website and i get this error in the console:</p>
  
  <pre><code>Error while trying to use the following icon from the Manifest: 
  http://localhost:3000/_nuxt/static/icons/icon-144x144.png (Download error or resource isn't a 
  valid image)
  </code></pre>
  
  <p>and this warning in the application tab Manifest:</p>
  
  <pre><code>actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-72x72.png does not match specified size (72x72px)
  actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-96x96.png does not match specified size (96x96px)
  actual size (1x1)px of icon http://localhost3000/_nuxt/static/icons/icon-128x128.png does not match specified size (128x128px)
  </code></pre>
  
  <p>and the same warnings for the rest of the icons.</p>
  
  <p>manifest object content:</p>
  
  <pre><code>manifest: {
  short_name: 'ProjectName',
  name: 'Project Name',
  start_url: '/en/',
  theme_color: '#f0b54d',
  display: 'standalone',
  background_color: '#f0b54d',
  orientation: 'portrait-primary',
  icons: [
    {
      src: "./static/icons/icon-72x72.png",
      sizes: "72x72",
      type: "image/png"
    },
    {
      src: "./static/icons/icon-96x96.png",
      sizes: "96x96",
      type: "image/png"
    },
    {
      src: "./static/icons/icon-128x128.png",
      sizes: "128x128",
      type: "image/png"
    },
    {
      src: "./static/icons/icon-144x144.png",
      sizes: "144x144",
      type: "image/png"
    },
    {
      src: "./static/icons/icon-152x152.png",
      sizes: "152x152",
      type: "image/png"
    },
    {
      src: "./static/icons/icon-192x192.png",
      sizes: "192x192",
      type: "image/png"
    },
    {
      src: "./static/icons/icon-384x384.png",
      sizes: "384x384",
      type: "image/png"
    },
    {
      src: "./static/icons/icon-512x512.png",
      sizes: "512x512",
      type: "image/png"
    }
  ]
  </code></pre>
  
  <p>},</p>
  
  <p>i tried to apply the Nuxt way of importing the icons by creating an icon object in <code>nuxt.config.js</code> file like this:</p>
  
  <pre><code>icon: {
     iconSrc: './static/icons/icon-512x512.png'
  }
  </code></pre>
  
  <p>it does not recognize it at all and says that this project does not have an icon to show.</p>
  
  <p>i notest another error in the console that says:</p>
  
  <pre><code>GET http://localhost:3000/_nuxt/static/icons/icon-144x144.png 404 (Not Found)
  </code></pre>
  
  <p>it show different icon with every refresh.</p>
  
  <p>what i tried:
     - i tried different icons several times.
     - i tried to use vanilla js approach to write Manifest object.
     - i tried to use Nuxt PWA approach to import the icons.</p>
  
  <p>screen shot of Manifest tab:
  <a href="https://i.stack.imgur.com/mo8wq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mo8wq.png" alt="enter image description here"></a></p>
  
  <p>screen shot of network tab:
  <a href="https://i.stack.imgur.com/ze6qp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ze6qp.png" alt="enter image description here"></a></p>
  
  <p>it says that icon-144x144.png is a GIF file!! which is weird.</p>
  
  <p>so any help plz. </p>