July 13, 2019

The new icons in Google search results

Average Reading time: 4 minutes, 0 seconds

Google recently rolled out a new design of the mobile search results worldwide. The two most striking differences are that the paid results are now even more difficult to distinguish from organic search results, and that the organic results now show an icon next to the website URL. Not much is known about the opportunities that the new icons offer. How can you best use the icons, both technically and as a way to stand out?

Node.js development in Paypal enterprise application

What icon should I choose?

The icon has not received much space from Google: the website icon is displayed in a square of only 16 by 16 pixels. It is noticeable - especially on retina screens such as an iPhone - that the icon is not very sharp. To solve that, Google should actually load an icon of 32x32 pixels to appear sharp on iPhones. Because the icon is not displayed sharply, this limits the creative options.

The most important tip is to ensure that your website icon is recognizable. A good example of attractive and recognizable icons are Instagram, Zalando and Microsoft. These correspond well with their own logo.

Avoid showing a word or a complex image. Most times we'd recommend not to place your logo in the icon, as it might get too complex and won't look the way you want people to perceive your brand.

Don't just try to shrink your existing company logo and make it square. This looks messy. At this size, letters become hard to read. Uber solves this by displaying the icon as a whole black square, and Uber Eats has opted for a pizza slice as the solution instead of the logo.

When creating the icon, try to work with the limited space you have. Try to avoid gradients, shadows and dark colors. Also use all the space, and avoid leaving a lot of empty space around the icon, so that the image appears unnecessarily small in the search results.

My experience is that the most striking icons in the search results have a striking color, with a small recognizable symbol. That works best.

How is the icon chosen by Google?

Google makes a 16x16 icon from the options that your website itself offers. The same icon applies to all pages on your (full) domain, and cannot be set for individual pages. You can offer the icon in several ways. Unfortunately you cannot offer an icon specifically for the Google results, but you have to use existing standards.

To test frequently, I came out in the following order:

  • Google looks at the full domain name of the page that appears in the search results.
  • As the first preference, Google selects the link rel = "shortcut icon" if specified.
  • As a second choice, Google chooses the largest format from the and options.
  • If no icon elements are specified in the html, Google will try to load the image on domain.com/favicon.ico.
  • If no favicon.ico image exists, Google will display a generic purple globe.

So beware, even the element with 'apple-touch-icon' is picked up - often unexpectedly - by Google. This is intended as a homescreen icon on iOS and is in many cases not optimized to be reduced to 16x16 pixels.

Is your business branding strong enough?

Follow multiple enterprise-level organizations and squeeze the most out of your possibilities. Work with branding & design experts who will push hard to understand your business and take you to the next level.

If you make a change, it can sometimes take up to a week before it is visible in the search results. Take this into account before you put a new design live without testing it properly.

For now, the icons only appear in the mobile search results. But it would not surprise me if this will also be rolled out to desktop. Hopefully the quality of the icons will increase, so that a representative icon can actually be placed instead of what is now possible.

Kick start your business

Do you come across things that you do not fully understand while trying? Please contact us! We are happy to help you!

As one of New York City’s startup specialists, delivering lean marketing and software development services, scopeweb works with small teams to deliver big results. We help businesses - both startups and established - to use technology to build the next decade of improvements and growth. Send us an email at info@scopeweb.nyc or call us at 570 580 7737. We are also happy to answer any questions you may have!