Your Favicon Now Shows in Mobile Search

A small square beside every listing

Last week Google changed how its results look on phones. Each listing now opens with the site's name and a small icon, above the page title.

That icon is the favicon, the same one that sits in a browser tab. Ads now carry a bold Ad label in the same position.

Until now, most small businesses never had to think about their favicon. Many have whatever default the site was built with, or none at all. Others have their full logo, shrunk until it is an unreadable smudge.

Either way, it now sits beside your name in every search a customer makes on a phone.

Where the favicon appears

• Browser tabs, where it is the only label once a dozen are open.
• Bookmarks and history, which are often scanned by icon rather than read.
• Phone home screens, when somebody saves the site as a shortcut.
• Mobile search results, beside your name, since last week.

The last is new, and it is the only one where a stranger sees the icon before choosing you. The others reach people who have already visited.

Each place shows the icon at a different size, which is why a single file rarely suits them all.

What most favicons look like

Three versions turn up again and again.

No favicon at all, so the browser shows a blank page symbol and Google shows a generic default. Or the default icon of the platform or theme the site was built with, which advertises somebody else.

Or the full logo, squeezed into a square: a wordmark that becomes a grey line, an emblem that becomes a blob, a tagline that becomes a texture.

The third is the most common on sites that had a designer, because the logo file was the obvious thing to upload.

Sixteen pixels is very small

Google shows the icon at sixteen pixels square, about the height of a line of text on the screen.

At that size, thin lines disappear, detail merges into mud, and two similar colours become one. Lettering below a certain size simply cannot be drawn.

What survives is one bold shape: a single letter, a simple symbol, a strong outline, in colours with plenty of contrast, filling most of the square.

It also has to work on more than white. Browser tabs can be grey or dark, and an icon designed only for white can vanish against them.

Start from the logo you have

Most logos contain something that can stand alone: an initial, a symbol, a distinctive shape. That piece, in the brand's colours, makes a favicon customers will connect with the sign and the van.

If the logo is only a name in a particular typeface, the first letter in that typeface on a square of the brand colour usually works.

What does not work is inventing a new symbol for the favicon alone. It becomes one more version of the brand, unconnected to the others.

A worked example

A garden centre run by the same family for three decades has a logo of its full name in a flowing script, above a watercolour drawing of a greenhouse topped with a single leaf.

Its favicon was that logo, reduced. In browser tabs it was a green and brown smudge, and in the new mobile results it sat beside the name like a thumbprint.

The designer who drew the logo took the single leaf from the greenhouse roof and set it in white on the garden centre's dark green, filling the square.

At full size it looked almost too simple. At sixteen pixels it was the only version that still read as a leaf.

The same mark went on the larger icon for phone home screens and on the profile pictures for the garden centre's social accounts, so the small square matched everywhere it appeared.

What Google asks for

Google's guidance for favicons in search asks for a square image at 48 pixels or a multiple of it, such as 96 or 144, since it is scaled down for display.

Both the icon file and the home page must be open to Google's crawler, and the icon should represent the brand. Google replaces anything it considers inappropriate with a default.

Once the icon is set, keep it at the same address. The guidance asks for a stable file location rather than one that keeps changing.

And a new favicon will not appear in results straight away. Google has to crawl the home page again first.

The files to have

A small set covers every place the icon appears: a square master at 512 pixels, a 180-pixel version for iPhone home screens, and the classic favicon file for older browsers.

On WordPress, the Site Icon setting under Site Identity asks for an image of at least 512 pixels and produces the smaller sizes itself, including one Google can use.

Keep the master with your other logo files, so the next website, or the next person who needs it, does not start from a screenshot.

Checking it where customers see it

The test that matters is the one customers see. Search on a phone for your business name, then for your main service and your town.

Look at your icon beside the others on the page: whether it reads at all, whether it looks like yours, whether it disappears against the background.

Then open your site among a dozen browser tabs and try to find it by the icon alone. If you cannot, neither can a customer.

The counter-case

A favicon will not win a click by itself. The title and description beneath it do most of that work, and a good icon on a weak listing changes little.

A business whose favicon is already a clear, simple mark has nothing to do. And nobody should commission a new brand for the sake of a sixteen-pixel square.

This is an hour of a designer's time with the logo files open, not a project.

But since it now appears beside your name in every mobile search, make the square say something.

This week

1. Search your business name on a phone.
2. Compare your icon with the listings around it.
3. Pick one mark from your existing logo.
4. Fill the square with strong contrast.
5. Test it at sixteen pixels on light and dark.
6. Upload a 512-pixel version as the site icon.
7. Search again in a couple of weeks.

Step five is where most favicons fail. A design that looks crisp at full size on a designer's screen can turn into a smudge at the size people actually see it.

Keeping that mark consistent with everything you print is covered in a business card, a sign and a website that disagree.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.