The Importance of Favicons in Mobile Search Results

This article was first seen here on Seo Hacker

It’s not a secret that most of the users that search on Google are using their mobile devices which is why Google has been constantly improving their mobile search experience. When compared to how it looked before, mobile search experience has experienced notable changes – some for the better and some, arguably, for the worst. Does this most recent design update make the user’s mobile search experience better or worse? Let’s find out.

Google has been constantly testing out new designs for mobile search over the years and they recently started displaying favicons for all the websites in the mobile SERPs. The primary reason why Google rolled out this update is to bring a website’s branding in front of the user and help them better understand where the information comes from and if the pages that they visit have what they’re looking for. But this update also involves search ads display and poses potential problems for organic search results. Before we dive in deeper, let’s talk about favicons.

What is a Favicon?

A favicon is commonly associated with a website and is often regarded as its “logo” or “icon”. Historically, these small icons were and are still displayed in a browser’s tab to represent a website’s branding and help users identify sites that prove useful to them. Here’s what it looks like in a browser’s tab:

If your website doesn’t have a favicon, browsers and search engines will use a default or generic symbol in place of your favicon. If you want to improve your branding in the world wide web, then having a favicon is a must-have.

How to Create a Favicon and Add It to Your Site

Creating a favicon is one of the simplest things you can do – especially if you already have a logo for your website. There are a variety of favicon generators available that lets you create your favicon in a matter of seconds. However, it becomes a challenge when you don’t have your own logo to turn into a favicon.

After you’ve created your own favicon, adding it to your site is also an easy process. To simplify it in 2 steps:

1. Upload the favicon.ico file to your desired folder
2. Insert this code <link rel=“shortcut icon” href=“(link to the directory)/favicon.ico” /> in the <header> tag

For a more comprehensive guide to applying it to WordPress sites, here’s a guide

Note: Some themes allow you to add the favicon within the theme settings.

Google’s Mobile Search Favicon Design Update

Google recently updated their mobile search design and they started showing a website’s favicon in the search results.

Here’s a side by side comparison on the old look and the new one:

 

It looks great. It helps users identify websites they know faster and it helps us webmasters and SEOs spread awareness of our brand/website. Of course, this update has implications not just for us but also for normal marketers that don’t dabble in SEO, the businesses themselves, and many others that put their focus in their website’s online presence.

An important aspect to remember is that Google has guidelines for the favicons they display in the mobile search results and even if everything in the guidelines are met, having your favicon displayed is not assured. Here are Google’s favicon guidelines:

• Both the favicon file and the home page must be crawlable by Google (that is, they cannot be blocked to Google).
• Your favicon should be a visual representation of your website’s brand, in order to help users quickly identify your site when they scan through search results.
• Your favicon should be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. SVG files, of course, do not have a specific size. Any valid favicon format is supported. Google will rescale your image to 16x16px for use in search results, so make sure that it looks good at that resolution. Note: do not provide a 16x16px favicon.
• The favicon URL should be stable (don’t change the URL frequently).
• Google will not show any favicon that it deems inappropriate, including pornography or hate symbols (for example, swastikas). If this type of imagery is discovered within a favicon, Google will replace it with a default icon.