Google has recently announced a new update that will be rolling out on mobile search results soon. The new update adds favicons more prominently in the search results and changes the placement of the sites link structure in the serps.
You can see an image Google shared demonstrating the difference below:
What does this mean for SEO?
In my opinion the new design makes it easier for Google to blend ads in with Organic results. I think that the distinction of an ad from an organic result has becoming increasingly difficult for the user to be able to tell.
This is not good for SEO as many users will click an ad when they believe they are clicking the organic result. This also makes it even more important than ever before for your site to have a favicon.
I do think highlighting the favicon is a great idea because it makes it easier to tell if you are visiting the right site (when re-visiting a site you have been on before). Although I wish Google had done it while keeping the green ad icon users are used to instead of switching to a dark generic “ad” text.
How do I check if my site already has a favicon?
You should be able to see a little icon next to your site’s title inside your browsers tab. If you do not see it than your site probably doesn’t have a favicon, you can use this tool to double check: https://realfavicongenerator.net/favicon_checker
How do I create a favicon?
Creating a favicon is as simple as resizing an image and putting it into the right format. Choosing your image is the hardest part, generally I recommend using a part of your logo. Since the favicon is shown at really small sizes your picture should have as little detail as possible and be easy to identify at small sizes.
You can use this tool to automatically resize it and put it in the right format for you.
How do I add a favicon to my site?
If you don’t have a favicon on your site you will probably want to add one.
If your using a WordPress website usually your theme will have an option to add a favicon to it. Check your theme’s documentation to find it if you are unsure where it is.
If you are using a website builder such as Squarespace or Weebly you should be able to find a spot to change the icon in the website settings.
If your website is custom built or your website builder does not have the option to add a favicon most modern browsers will use a favicon.ico file placed in the root directory of your site. In order to ensure your favicon gets picked up with all browsers add the following code between the <head> </head> tags on your website:
<link rel='icon' type='image/x-icon' href='/favicon.ico' />Or if you icon is a png use this code:
<link rel='icon' type='image/png' href='/favicon.png' />If you use the tool that I linked above than it will automatically provide you with the code required to add to your website.
