0

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

1 Answer 1

0

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
} );
2
  • I think you're missing the content of site.webmanifest, right?
    – Den Isahac
    Aug 12, 2023 at 4:03
  • It is generated by Real Favicon Generator.
    – Caleb
    Aug 12, 2023 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.