Favicon not showing in Google search results

Question

My website's favicon is not showing up in Google's search results. I have tried several things without success, but I think I understand what goes wrong now.

On the Wordpress dashboard, I clicked into Appearance > Customize > Site Identity and changed the site icon to a favicon of 48 x 48 px, following Google's guidelines. However, when pressing Ctrl + Shift + J on the home page and looking at the head's HTML, I see the following:

<link rel="icon" href="https://discovernavarra.com/wp-content/uploads/2023/08/Favicon.png" sizes="32x32">
<link rel="icon" href="https://discovernavarra.com/wp-content/uploads/2023/08/Favicon.png" sizes="192x192">
<link rel="apple-touch-icon" href="https://discovernavarra.com/wp-content/uploads/2023/08/Favicon.png">
<meta name="msapplication-TileImage" content="https://discovernavarra.com/wp-content/uploads/2023/08/Favicon.png">

I do not understand why Wordpress duplicates the favicon with those sizes, as I just uploaded a 48x48 png.

Is there a way to edit that? I tried going to the header.php of the Astra theme, which is the active theme, but those lines do not show up. The home page is discovernavarra.com.

Thanks

Answer 1

I always use Real Favicon Generator to generate favicon images for my websites, and have never had any issue.

Their favicon checker did have several issues come up for your site: https://realfavicongenerator.net/favicon_checker?protocol=https&site=discovernavarra.com.

I suspect that the redirect on favicon.ico may be the issue, though I do not know for sure.

I never use a provided theme's favicon system, always implement it manually with images in root and an mu-plugin.

Files in root:

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
browserconfig.xml
favicon-16x16.png
favicon-32x32.png
favicon.ico
mstile-150x150.png
site.webmanifest

mu-plugins/favicons.php

add_action( 'wp_head', static function () {
    ?>

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <?php
} );