So the favicon for my website (a 256x256 .ico file) doesn't show up on Google Search. It shows the vercel logo, but when you click on the website, the correct favicon shows up in the browser tab. Even on search console, the vercel logo shows up as the favicon. I have no clue why.

Already checked other threads/forums. What could be the issue?

I have registered the domain on google search console. The page is indexed. The favicon fits search guidelines (double checked using favicon checker).

So the favicon for my website (a 256x256 .ico file) doesn't show up on Google Search. It shows the vercel logo, but when you click on the website, the correct favicon shows up in the browser tab. Even on search console, the vercel logo shows up as the favicon. I have no clue why.

Already checked other threads/forums. What could be the issue?

I have registered the domain on google search console. The page is indexed. The favicon fits search guidelines (double checked using favicon checker).

• javascript
• html
• reactjs
• google-chrome
• favicon

• 1 i'd say it's just still showing the cached favicon. Unless there is a way to invalidate the cache manually, you probably just need to wait – Damzaky Commented Jul 14, 2024 at 3:14
• What icon is displayed when you open yourwebsite./favicon.ico? – Salman Arshad Commented Jul 15, 2024 at 17:34
• 1 @SalmanArshad the correct intended one (not the vercel logo) – Ansh Tandon Commented Jul 15, 2024 at 19:50

3 Answers 3

The reason for not showing the configured Favicon in the Google Search results can be due to multiple issues

1. Google performs site crawling with a queue. So, even if Google mentions that they have done with the crawling and indexing, it might take a couple of days (rarely) to reflect the changes. So, it will be good to make another round of indexing request, so that we can ensure that they have crawled and indexed the sites properly

2. Try accessing the Favicon URL from the browser and see if the icon is getting received as expected. If not, then the path you have configured is not the correct one to fetch required favicons.

3. The Favicon aspect ratio and sizes. If you are using a SVG as your icon, then you need to maintain a 1:1 (square) aspect ratio and it needs to be configured in your sites reflecting the image type with type="image/svg+xml" . For example:

   <link rel="icon" type="image/svg+xml"  href="https://example./image.svg">
   

   Therefore, please check whether you can update your existing icon with a SVG and see if that works. Since you are using an ico, from my experience, it is better to have a 64x64 sized icon configured.

   Furthermore, try adding the rel tag with shortcut icon, rather specifying only icon as the value.

4. If you are using Vercel to build your application, try purging the cache and the building the production build. Purging the cache will remove any existing links to the Vercel icon if you have recently updated them.

5. Try performing a hard-refresh in your browser, and also try accessing your site using different browsers (Firefox, Edge, Safari and Incognito versions).

If your favicon shows correctly on your website but not in Google Search results, it might be due to a few potential reasons:

1. Google might be using a cached version of your site. This cache could include the old favicon, especially if you've recently changed it. It may take some time for Google to update the favicon in their search results.

2. Ensure that the favicon is correctly referenced in your HTML. The mon way to link a favicon in your HTML is:

   <link rel="icon" href="/path/to/favicon.ico" sizes="any">
   

3. Ensure that the URL where the favicon is hosted is accessible and doesn't return any errors. Sometimes, permission issues or incorrect paths can cause problems.

4. Since you mentioned the favicon appears as the Vercel logo in the Google Search Console, double-check your settings there. Sometimes, incorrect settings or a misconfiguration in the console can cause these issues.

5. Even if everything is set up correctly, it might take some time for the changes to propagate across Google's servers. This process can take several days or even weeks in some cases.

Here are a few steps to troubleshoot and potentially resolve the issue:

Step-by-Step Troubleshooting

1. Clear Caches:

   • Clear your website’s cache if you’re using any caching mechanisms (e.g., Vercel cache).
   • Use the Google Search Console to request a recrawl of your site. You can do this by going to the "URL Inspection" tool, entering your URL, and requesting indexing.

2. Double-Check Implementation:

   • Ensure your favicon is implemented correctly in your HTML. Here’s an example:

   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   

   • Also, include other favicon formats for different devices:

   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   

3. Verify Accessibility:

   • Visit your favicon URL directly in the browser (e.g., https://yourdomain./favicon.ico) to ensure it loads correctly.

4. Check for Multiple Favicon Declarations:

   • Ensure you don’t have multiple <link rel="icon"> tags pointing to different favicon files. This could confuse Google on which favicon to use.

5. Submit a Sitemap:

   • Submit or update your sitemap in Google Search Console to help Google discover all pages and assets (including the favicon) more efficiently.

6. Monitor Changes:

   • Use tools like Google’s Rich Results Test to see how Google fetches and interprets your favicon.
   • Regularly check Google Search Console for updates or any errors related to your favicon (sometimes I used to get a mail).

If you've verified all these steps and the issue persists, you may need to wait a bit longer for Google to update their cached favicon. Sometimes, despite everything being set up correctly, it can take a while for the new favicon to appear in search results (i have experienced this before).

Clear your browser cache or try accessing your website in incognito mode to see if the updated favicon appears.