Some favicon request returns 404 Not found

[gdjohn4s]

Describe the bug

Some requests to obtain the website's favicon from the API return a 404 error, which results in the default low-resolution favicon being displayed and triggers an error in the browser console.

To Reproduce

Simply open the console and navigate to the website.

Expected behavior

There should be no 404 errors in the favicon requests.

Screenshots

[gdjohn4s]

For this issue, we have tried various solutions:

• Passing the request through a middleware
• Trying to get the status code from the client

The main problem occurs during the fetch of the endpoint to obtain the favicon, unfortunately whether it is executed on localhost or on the apivault server, a CORS error is obtained that does not allow to check the status code and assign a default favicon to the API cards.

So we tried inserting mode: 'no-cors' in the request header, but by doing so we always get a status code set to 0.

We also tried to check the pixels of the favicon since the default one always has a resolution of 16x16, but unfortunately, there are some working favicons that also have the same resolution

For now, we are still investigating possible solutions. We would not like to use a middleware since, from the tests performed, a middleware would greatly slow down the loading of the favicon, worsening the user experience on the site.

If you have any ideas, we are happy to listen and discuss them.

Below are the snippets used for the no-cors: 200 OK Request

const faviconUrl = 'https://www.google.com/s2/favicons?domain=https://mailchimp.com/&sz=128';
const faviconImage = new Image();
faviconImage.onload = function() {
  if (faviconImage.complete && faviconImage.naturalWidth === 16 && faviconImage.naturalHeight === 16) {
    console.log('404');
  } else {
    console.log('200');
  }
};
faviconImage.onerror = function() {
  console.log('404');
};
faviconImage.src = faviconUrl;

404 Not found request

const faviconUrl = 'https://www.google.com/s2/favicons?domain=http://mgnet.me/&sz=128';
const faviconImage = new Image();
faviconImage.onload = function() {
  if (faviconImage.complete && faviconImage.naturalWidth === 16 && faviconImage.naturalHeight === 16) {
    console.log('404');
  } else {
    console.log('200');
  }
};
faviconImage.onerror = function() {
  console.log('');
};
faviconImage.src = faviconUrl;

[kisharnath]

Can i work on this issue?

[gdjohn4s]

Oh sure! Thank you 😄