How to Add Favicon Background Color in Google Search Results?

  • rahulhere

    (@rahulhere)


    1 year, 1 month ago

    Hi everyone,

    I need some help with customizing my website’s favicon appearance in Google search results. I’ve noticed that some websites have a black background around their favicon in search results, but whenever I upload my favicon through the WordPress general settings, it appears as a square instead.

    Can someone guide me on how to achieve this background color effect? Do I need to add any custom code in the website header or modify any settings?

    Appreciate any insights. Thanks in advance!

    View post on imgur.com
Viewing 4 replies - 1 through 4 (of 4 total)
  • George Appiah

    (@gappiah)

    1 year, 1 month ago

    Are we talking of background (perhaps even border) colour? Or are we talking of circular vs square shape? Your post appears to confuse the two!

    Also, you’re mixing two other things here: icon on the Google search results page –vs– the browser’s favicon (displayed above the address bar next to the page’s HTML title). The latter is your real favicon image, the former is this favicon image plus Google’s CSS magic.

    I’ve noticed that some websites have a black background around their favicon in search results,

    No, that’s not my experience.

    I just tested this and Google added the following CSS around ALL icons on their search results page:

    {
    border: 1px solid #dadce0;
    background-color: #f1f3f4;
    border-radius: 50%;
}

    This CSS code makes the icons circular with a light grey ring/border around them. For transparent icons, this will also add an even lighter gray background to “empty” areas. The black you see, as in the Puma icon, is because the image itself is black, so adding the 50% border-radius changes it from a black square to a black circular shape. Note that Note that the same Puma favicon is a black square in the browser on the website itself!

    In summary:

    1. If you want your favicon to be circular in user’s browsers when they visit your site, create a circular favicon image and upload this circular image into your WordPress site
    2. If you only want your favicon to be circular on Google search results, you don’t have to do anything. This is CSS that Google is adding to the images displayed on its website

    And if I misunderstood your question, please feel free to call me out and clarify your request.

    Thread Starter rahulhere

    (@rahulhere)

    1 year, 1 month ago

    Apologies for any confusion.

    I’m referring to this type of favicon—when I upload a 512×512 pixel image in WordPress, the favicon appears as a boxed icon in my website’s search result page.

    View post on imgur.com

    However, I want the favicon’s background color to fill the entire space, without any white areas like PUMA, NIKE.

    How can I achieve this?

    Thanks!

    Moderator bcworkz

    (@bcworkz)

    1 year, 1 month ago

    Might be a question better asked in a forum related to Google Search since it’s more of a Google thing than a WP specific thing.

    After a brief investigation, it seems like icons sourced from .ico files are more likely to fill the circle, unlike the .png images WP sites typically use. Notably, the Puma site does not use .ico, yet they somehow achieved a filled circle. They have icon file sizes ranging from 48px sq. to 512px sq. We cannot normally upload .ico files to the media library, but if such a file exists on your server, the default WP favicon links can be altered via the ‘site_icon_meta_tags’ filter.

    I do not know if .ico files will always fill the Google search circles. It seems that way to me from a limited investigation.

    Anonymous User

    (@anonymized-23157725)

    1 year, 1 month ago

    you may try to add important declaration to your css rules to override googles default rules like for your favicon in your themes style.css file like:

    .img .fav {

    border: 1px solid #dadce0!important;

    background-color: #f1f3f4!important;

    border-radius: 50%!important;

    }

    that may give you the look you want to achieve.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to Add Favicon Background Color in Google Search Results?’ is closed to new replies.