How Can You Add Favicons to Google Search Results?

How can you add favicons to Google search results?

Well, let's start at the beginning: Did you know that Google can display website logos (or favicons) directly in the search results? Although they have been available on mobile devices for quite a while, favicons are currently also being tested for desktops. Favicons are a great way to distinguish your brand from within the search results. Today, we will show you how to set up these favicons!

In this article, you'll learn:

what favicons look like in Google
how to create a favicon
the technical requirements for displaying favicons
how to add a favicon to your website
how to change the colour of the browser bar

With the help of this blog article, you will be able to use favicons to stand out from the crowd and be remembered by your potential customers.

Let’s start from the beginning.

1. What does a favicon look like in Google?

Last year, Google added favicons to mobile search results. When it comes to the search engine's design, this change could be considered a breakthrough.

The decision was based on the fact that:

With the new design, the branding of websites would become more visible.
The layout of the result pages would help users to better understand the information displayed.
Internet users would be able to choose the sites they trust more easily.

What’s more:

Ads in mobile results display the word “Sponsored” instead of the brand's unique favicon. This is displayed next to the URL of the page.

The new design of the search results has been a success on mobile devices. Therefore, Google started to test favicons in desktop SERPs as well.

As you can see, favicons are becoming a priority for Google.

So, favicons can really help a brand stand out from the competition. However, you wouldn’t want your page to be displayed with just a default icon, would you?

In the following section, you will learn how to create your own favicon.

2. How do I create a favicon?

Shop or website owners usually use their business logo as their favicon. You can do the same, but the question is how?

The Favicon.io tool is very helpful for this purpose.

You can just drag the file with your logo into the tool and it will automatically generate favicons.

See the example with the eTrusted logo in the preview section of the screenshot.

Once you have downloaded the file, you will find ready-made favicons in several sizes and formats in the ZIP archive:

You can also create your own favicon with letters and a coloured background. Here’s an example with my initials (SB):

As you can see, the Favicon.io tool is very helpful and is not limited to simple image files.

A good favicon can be as much of an eye-catcher as a good Instagram account.

3. What are the technical requirements for displaying favicons?

Google has defined the technical requirements for favicons. When it comes to this, you should know one thing:

If you don’t meet Google’s requirements, your favicon will not be displayed in the search results.

Shutterstock/NURROHMAT NURROHMAT

However, remember that Google can’t guarantee that your favicon will be displayed, even if you meet the technical requirements.

Although Google states this in its official Google manual, your favicon is likely to appear if it meets the requirements:

Google requirements for favicons

1. The homepage and favicon file must be indexable

This means that they cannot have the no-index parameter set in the robots.txt file (or anywhere else). If you have never modified the robots.txt file, then everything should work correctly.

2. Favicons must represent your site

Google requires your favicons to be unique and linked to your website. The purpose of displaying your favicon in the search results is to make it easier for internet users to find the content they are interested in.

3. The favicon file must have a specific size and format

Although Google automatically resizes the favicons it finds on a page to 16x16 pixels, it requires website owners to have a larger file format.

The favicons must be either 48x48 pixels, 96x96 pixels, or 144x144 pixels.

Basically, you can use the 512x512 pixel favicon as the main one defined in the HTML file.

4. Availability under a specific URL

Your favicon has to be found with a specific URL and cannot be a dynamic address. If you change the URL, Google may lose the favicon in your index for a while.

4. How do I add a favicon to my website?

You can add a favicon to your website by using a tag in HTML code.

For an icon in .ico format:

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

For an icon in .png format:

<link rel="icon" type="image/png" href="favicon.png" />

A tag should be inserted in the <head> section.

You can also use ready-made instructions and/or integration for your CMS:

5. Bonus: Set your brand colour in your browser

Mobile browsers allow websites to change the colour of the top bar. By doing this, a company can increase its brand awareness and be recognised by potential customers through their colours.

To achieve this effect, you can insert the following tag in the page code:

<meta name="theme-color" content="#f73e3e" />

#f73e3e is the colour code, so this will change depending on what colour you want to use for the browser bar. It must be given in HEX format. You can download a colour in this format from the HTML Colour Codes page.

Enter the above code in the <header> section of your page, like in the example:

Conclusion

Now you know how to add a favicon to your website, so it will be displayed in Google's SERPs. It will help you get recognised even quicker and increase your brand awareness!