👋

Google recently introduced website icons next to its organic search results. It comes together with an overall new search results design that blends the paid ads into the organic results even more. Paid ads look identical except for an 'Ads' (or a localised variation) label next to the website URL or breadcrumb instead of an icon.

With ads harder to distinguish, it becomes even more important to focus your energy on creating an engaging organic listing for your website. And with this new design, your website icon is an extra opportunity to stand out in the results.

Unfortunately the icons look very blurry. Not only is 16 by 16 pixels very small, but Google also doesn't support retina variants. This leads to a blurry effect. I asked Google to look into supporting larger size icons (at least 32x32).

Blurry icon YouTube

Blurry icon Wikipedia

How is the icon picked?

Google creates a 16x16 icon based on the favicon provided by your own website.

Updated 4 june 2019: more testing shows that Google actually picks a different icon for the SERP than Google Chrome or the icon used in the Google Search Console!

I found it follows the following waterfall:

Googlebot visits your root domain (including subdomain):

1. It will pick the largest provided size from your provided: < link rel="icon" >, < link rel="apple-touch-icon" > or < link rel="shortcut" >.
2. Sizes being equal prefers a .png or .jpg over an .ico file.
3. If those are unavailable, it will fallback to the file hosted at domain.com/favicon.ico

Opinion: That the `apple-touch-icon` is used for the SERP (and scaled down to 16x16 pixels) is probably not what websites owners expect, and in my opinion not the correct implementation by Google. It should be in line with how the icon is picked by the browser's logic for its website tab icons.

Tip: Use the following tool to test which icon Google picks for your domain: https://build.amsterdam/icon-test.

What are good ways to optimise my icon?

There is not much data available yet, but from my anecdotal experience this is best:

• Optimise your icon for a small size. Don't just downsize a large logo. Best it to keep the source under 64x64 pixels, and see what to put in there.
• Keep it simple. A small letter (see Wikipedia) or icon (see Youtube) in on a bright background works best.
• Don't keep too much white or transparant space around your icon. It will make your icon look even more tiny.

What to do if I get a blue globe next to to url?

If there is a blue globe next to your domain, that means that Google couldn't find an icon for your website. You can solve this by creating a square icon and either (1) converting it to .ico format and saving it at domain.com/favicon.ico or (2) refer to your icon from the as < link rel="icon" >. Mozilla provides a good guide on this.

For now Google only serves the icons in the search results on mobile devices only, but don't be surprised if this rolls out to desktop as well.