How can you add favicons to Google search results? Google can display website logos directly in the search results. Although they have been available on mobile devices for quite a while, favicons are currently also being tested for desktop. Favicons are a great way to distinguish your brand when it comes to the display of search results. Today, we will show you how to add favicons!
In this article you will find out:
What favicons look like in Google and how to add them
Which requirements you have to meet to be able to display favicons
How to change the colour of the browser bar
With the help of this blog article you will be able to you 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.
Ads in mobile results display the word “advertising” instead of favicons. This is displayed next to the URL of the page.
The new design of the search results on mobile devices has been a success. Therefore, Google started to test favicons in desktop SERPs.
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 a default icon, right?
In the following section, I will show you how to create your own favicon.
It's not easy, but ranking high in search engines can bring you loads of traffic. We've created a checklist to help you get to the top of the search results!
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 can you do this?
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... Download our free Instagram guide now!
3. What are the technical requirements for displaying favicons?
Google has defined the technical requirements for favicons. Concerning this, you should know one thing:
If you don’t meet Google’s requirements, your favicon will not be displayed in the search results.
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, it’s not very likely to happen.
So here are the requirements Google has set up 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. Thanks to this, a company can increase its brand awareness and be recognised by potential customers.
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 cloulr 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:
We have shown you how to add a favicon to your website, which is displayed in Google SERPs. It will help you to be recognised even quicker and increase your brand awareness!
Good product images are essential to convert your shop's visitors into customers. Download our free whitepaper now!