Atomic Media

Google recently copied their mobile result layout over to desktop search results. The three big pieces which changed as part of that update were

• URLs: In many cases Google will now show breadcrumbs in the search results rather than showing the full URL. The layout no longer differentiates between HTTP and HTTPS. And the URLs shifted from an easily visible green color to a much easier to miss black.
• Favicons: All listings now show a favicon next to them.
• Ad labeling: ad labeling is in the same spot as favicons are for organic search results, but the ad labels are a black which sort of blends in to the URL line. Over time expect the black ad label to become a lighter color in a way that parallels how Google made ad background colors lighter over time.

Last year, our search results on mobile gained a new look. That’s now rolling out to desktop results this week, presenting site domain names and brand icons prominently, along with a bolded “Ad” label for ads. Here’s a mockup: pic.twitter.com/aM9UAbSKtv— Google SearchLiaison (@searchliaison) January 13, 2020

One could expect this change to boost the CTR on ads while lowering the CTR on organic search results, at least up until users get used to seeing favicons and not thinking of them as being ads.

The Verge panned the SERP layout update. Some folks on Reddit hate this new layout as it is visually distracting, the contrast on the URLs is worse, and many people think the organic results are ads.

Conspiracy Theory: The REAL reason icons are in SERPs is to encourage “banner blindness” for the “Ad” text. Once people see the icons over and over, they will learn to mentally ignore the top left. pic.twitter.com/LaXdZjNLK1— Rishi Lakhani (@rishil) January 17, 2020

I suspect a lot of phishing sites will use subdomains patterned off the brand they are arbitraging coupled with bogus favicons to try to look authentic. I wouldn’t reconstruct an existing site’s structure based on the current search result layout, but if I were building a brand new site I might prefer to put it at the root instead of on www so the words were that much closer to the logo.

Google provides the following guidelines for favicons

• 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: 48×48px, 96×96px, 144×144px 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 16×16px for use in search results, so make sure that it looks good at that resolution. Note: do not provide a 16×16px 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.

In addition to the above, I thought it would make sense to provide a few other tips for optimizing favicons.

• Keep your favicons consistent across sections of your site if you are trying to offer a consistent brand perception.
• In general, less is more. 16×16 is a tiny space, so if you try to convey a lot of information inside of it, you’ll likely end up creating a blob that almost nobody but you recognizes.
• It can make sense to include the first letter from a site’s name or a simplified logo widget as the favicon, but it is hard to include both in a single favicon without it looking overdone & cluttered.
• A colored favicon on a white background generally looks better than a white icon on a colored background, as having a colored background means you are eating into some of the scarce pixel space for a border.
• Using a square shape versus a circle gives you more surface area to work with.
• Even if your logo has italics on it, it might make sense to avoid using italics in the favicon to make the letter look cleaner.

Here are a few favicons I like & why I like them:

• Citigroup - manages to get the word Citi in there while looking memorable & distinctive without looking overly cluttered
• Nerdwallet - the N makes a great use of space, the colors are sharp, and it almost feels like an arrow that is pointing right
• Inc - the bold I with a period is strong.
• LinkedIn - very memorable using a small part of the word from their logo & good color usage.

Some of the other memorable ones that I like include: Twitter, Amazon, eBay, Paypal, Google Play & CNBC.

Here are a few favicons I dislike & why

• Wikipedia - the W is hard to read.
• USAA - they included both the logo widget and the 4 letters in a tiny space.
• Yahoo! - they used inconsistent favicons across their sites & use italics on them. Some of the favicons have the whole word Yahoo in them while the others are the Y! in italics.

If you do not have a favicon Google will show a dull globe next to your listing. Real Favicon Generator is a good tool for creating favicons in various sizes.

What favicons do you really like? Which big sites do you see that are doing it wrong?

Google recently copied their mobile result layout over to desktop search results. The three big pieces which changed as part of that update were

• URLs: In many cases Google will now show breadcrumbs in the search results rather than showing the full URL. The layout no longer differentiates between HTTP and HTTPS. And the URLs shifted from an easily visible green color to a much easier to miss black.
• Favicons: All listings now show a favicon next to them.
• Ad labeling: ad labeling is in the same spot as favicons are for organic search results, but the ad labels are a black which sort of blends in to the URL line. Over time expect the black ad label to become a lighter color in a way that parallels how Google made ad background colors lighter over time.

Last year, our search results on mobile gained a new look. That’s now rolling out to desktop results this week, presenting site domain names and brand icons prominently, along with a bolded “Ad” label for ads. Here’s a mockup: pic.twitter.com/aM9UAbSKtv— Google SearchLiaison (@searchliaison) January 13, 2020

One could expect this change to boost the CTR on ads while lowering the CTR on organic search results, at least up until users get used to seeing favicons and not thinking of them as being ads.

The Verge panned the SERP layout update. Some folks on Reddit hate this new layout as it is visually distracting, the contrast on the URLs is worse, and many people think the organic results are ads.

Conspiracy Theory: The REAL reason icons are in SERPs is to encourage “banner blindness” for the “Ad” text. Once people see the icons over and over, they will learn to mentally ignore the top left. pic.twitter.com/LaXdZjNLK1— Rishi Lakhani (@rishil) January 17, 2020

I suspect a lot of phishing sites will use subdomains patterned off the brand they are arbitraging coupled with bogus favicons to try to look authentic. I wouldn’t reconstruct an existing site’s structure based on the current search result layout, but if I were building a brand new site I might prefer to put it at the root instead of on www so the words were that much closer to the logo.

Google provides the following guidelines for favicons

• 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: 48×48px, 96×96px, 144×144px 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 16×16px for use in search results, so make sure that it looks good at that resolution. Note: do not provide a 16×16px 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.

In addition to the above, I thought it would make sense to provide a few other tips for optimizing favicons.

• Keep your favicons consistent across sections of your site if you are trying to offer a consistent brand perception.
• In general, less is more. 16×16 is a tiny space, so if you try to convey a lot of information inside of it, you’ll likely end up creating a blob that almost nobody but you recognizes.
• It can make sense to include the first letter from a site’s name or a simplified logo widget as the favicon, but it is hard to include both in a single favicon without it looking overdone & cluttered.
• A colored favicon on a white background generally looks better than a white icon on a colored background, as having a colored background means you are eating into some of the scarce pixel space for a border.
• Using a square shape versus a circle gives you more surface area to work with.
• Even if your logo has italics on it, it might make sense to avoid using italics in the favicon to make the letter look cleaner.

Here are a few favicons I like & why I like them:

• Citigroup - manages to get the word Citi in there while looking memorable & distinctive without looking overly cluttered
• Nerdwallet - the N makes a great use of space, the colors are sharp, and it almost feels like an arrow that is pointing right
• Inc - the bold I with a period is strong.
• LinkedIn - very memorable using a small part of the word from their logo & good color usage.

Some of the other memorable ones that I like include: Twitter, Amazon, eBay, Paypal, Google Play & CNBC.

Here are a few favicons I dislike & why

• Wikipedia - the W is hard to read.
• USAA - they included both the logo widget and the 4 letters in a tiny space.
• Yahoo! - they used inconsistent favicons across their sites & use italics on them. Some of the favicons have the whole word Yahoo in them while the others are the Y! in italics.

If you do not have a favicon Google will show a dull globe next to your listing. Real Favicon Generator is a good tool for creating favicons in various sizes.

What favicons do you really like? Which big sites do you see that are doing it wrong?