Favicon doesn't show up in google result [duplicate]

Question

These are my link tags in my index.html (inside the head tag):

<link rel="icon" href="./iconePourOnglet.png" type="image/png" />
<link rel="apple-touch-icon" href="./logo192.png" type="image/png" />
<link rel="apple-touch-icon-precomposed" href="./logo192.png" type="image/png" />
<link rel="shortcut icon" href="./logo192.png" type="image/png" />

But I still see on Google results the globe:

Even in my Google Search Console there is a globe:

When I use the Google Favicon Snatcher to check my favicon as seen by Google, it's still a globe (https://www.google.com/s2/favicons?domain=https://as-quebec.net).

PS: I am able to see my icons there:

and there:

So do you know how can I display my icon in Google results instead of the actual default globe?

Update:

I'm coding in React, and I've made changes. This is my index.html:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon-precomposed" href="%PUBLIC_URL%/favicon.ico" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

This is my manifest.json:

{
 "short_name": "AS Québec",
 "name": "Create React App Sample",
 "icons": [
 {
  "src": "favicon.ico",
  "sizes": "64x64 32x32 24x24 16x16",
  "type": "image/x-icon"
},
{
  "src": "logo192.png",
  "type": "image/png",
  "sizes": "192x192"
},
{
  "src": "logo512.png",
  "type": "image/png",
  "sizes": "512x512"
}
],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

But I still see the globe...

Now I updated and it's like this:

I'm coding in React, and I've made changes. This is my index.html:

This is my manifest.json:

{  "short_name": "AS Québec",  "name": "Create React App Sample",  "icons": [  {   "src": "favicon.ico",   "sizes": "64x64 32x32 24x24 16x16",   "type": "image/x-icon" }, {   "src": "logo192.png",   "type": "image/png",   "sizes": "192x192" }, {   "src": "logo512.png", "type": "image/png",   "sizes": "512x512" } ],   "start_url": ".",   "display": "standalone",   "theme_color": "#000000",   "background_color": "#ffffff" }

But I still see the globe...

Answer 1

I don't have any issues with any of my 16 sites. Yandex is explicit and likes the first favicon to be at least 32X32. So, all my sites do this. Maybe Google also prefers this. And I would put the size on them - for example

  <link rel="icon" type="image/png" href="/img/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/svg+xml" href="/img/favicon.svg" sizes="120x120" />
  <link rel="icon" type="image/png" href="/img/favicon-192x192.png" sizes="192x192" />
  <link rel="icon" type="image/png" href="/img/favicon-512x512.png" sizes="512x512" />
  <link rel="apple-touch-icon" type="image/jpg" href="/img/apple-touch-icon.png" />
  <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico" />
  <link rel="icon" type="image/x-icon" href="/img/favicon.ico" />

Edit - I just checked (Browser inspect menu) and every one of the sites shows the 32x32 icon rendered as 16x16.

Answer 2

Try in the header to add more link to the favicon format .ico perhaps some services are not oriented to png format. But in general here it is necessary to understand on how long you added a favicon to the site, as must pass some time and reindexation for search engine to see your new favicon

Answer 3

Before depending on meta, you should do the primary requirement and common understanding of websites. convert your icon to .ico file and upload it to the root of either public_html or www/html and name it "favicon.ico"

Clear cache and you might wait for SEO to capture it, for like 48 hours usually or more, but on your site it's immediately put there. Meta are subordinates of such methods but not the common sense.