How To Add Favicon On Search Results in Google

Sharing is Caring

Favicons, those tiny icons that appear next to a website’s name in browser tabs, are not just about aesthetics. They also serve as a visual identifier for your website, helping users quickly find and recognize your site among a sea of open tabs.

However, there are times when favicons don’t show up as expected, particularly in search engine results. This can make your site appear less professional and memorable.

In this article, we’ll explore why favicons might not be appearing in search results and how to fix this issue. We’ll also cover the process of adding a favicon to the WordPress website’s Google search results to enhance your website’s visibility.

Why Your Favicon Might Not Show in Search Results

Before we dive into the solution, let’s first understand why your website’s favicon may not appear in search results. There can be several reasons for this:

No Favicon in the First Place: Sometimes, the issue is that you haven’t set a favicon for your website. If you don’t have a favicon, search engines won’t be able to display one.
Incorrect Favicon Format or Location: If your favicon is not in the right format (typically a .ico file) or if it’s not placed in the root directory of your website, search engines may not find it.
Caching Issues: Cached data in your browser can sometimes cause favicons not to display correctly. Clearing your browser’s cache might resolve this.
Search Engine Crawl Delay: Search engines may take some time to crawl your site and update their results. This can lead to delays in displaying your updated favicon.

Now, let’s address these issues and ensure your favicon shows up correctly in search results.

Adding a Favicon to Your Website

First things first, if you haven’t set a favicon for your website, you’ll need to create one. You can use a free online tool like Favicon Generator to generate icons for various platforms, including web, Android, Microsoft, and iOS.

Follow these steps to add a favicon to your website:

Generate your favicon icons on Favicon Geneator. Make sure to choose the options that suit your needs, including the sizes you want to generate.
Once you have generated the favicon icons, download the files to your computer.
Upload all the generated favicon files (including apple-touch-icon and android-icon files) to your website’s media library. Be sure to remember the file names and their locations.

Adding Favicon Code to Your WordPress Theme Head

Now that you have the favicon files in your media library, you need to tell your website where to find them. To do this, you’ll add specific code to the <head> section of your WordPress theme. Here’s how:

Access your WordPress dashboard and go to the theme editor. You can find this under “Appearance” in the dashboard.
In the theme editor, locate and open the header.php file. This file contains the HTML head section.
Insert the following code just before the closing </head> tag:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Save the changes.

Once you’ve added this code, your website will specify the location of your favicon files in the HTML header, making it easier for search engines to locate and display them.

Be Patient

Keep in mind that it might take some time for search engines to re-crawl your site and update their search results with the new favicon. Be patient and give it some time before expecting to see your favicon in search results.

In conclusion, ensuring that your website’s favicon displays in search results is essential for brand recognition and user experience. By following the steps outlined in this article, you can easily add and fix the display of your website’s favicon in search results, ultimately enhancing your site’s visual identity and professionalism.

Sharing is Caring