Supply a simple square icon designed to read at very small sizes, in the sizes browsers and devices expect, and check it appears in a tab, a bookmark, and on a phone home screen.

Where it appears

The tab, which is where most people see it, frequently as the only visible identifier when the tab is narrow enough to hide the title.

The bookmark list, where somebody who saved your site is choosing from a column of icons.

Browser history and the address bar suggestions.

And the home screen, if somebody adds your site to a phone, where it sits alongside their apps.

Which makes it small and consequential in a specific way: it is the branding present at the moment somebody is trying to return to you.

What the default communicates

A blank page symbol, or the browser's generic globe.

Nobody consciously judges a site for it, and it does two practical things.

It makes your tab indistinguishable from every other unset tab, so somebody with several open cannot find yours at a glance.

And it is a small signal that the site was not finished, in the same category as a placeholder image or lorem text, which people do notice cumulatively.

For a business whose customers open several competitor sites at once to compare, being the unidentifiable tab is a genuine small cost.

Designing one that reads

The second is where most attempts fail: a full logo scaled to sixteen pixels becomes a smudge, and the correct approach is a simplified mark or a single initial.

Transparent backgrounds are a trap

Worth its own note, since it is the most common technical mistake.

An icon with a transparent background sits on whatever colour the browser uses, which differs between browsers and changes entirely in dark mode.

A dark mark on a transparent background disappears against a dark tab bar, which is now a large share of viewers.

Give it a solid background in your brand colour with a light mark, or the reverse, so it works against anything.

Check it in both light and dark mode, which takes a minute and catches this immediately.

The sizes to supply

More than one, since different contexts use different files.

A small icon for the browser tab, which is where the sixteen pixel constraint comes from.

A larger square for bookmarks and higher-resolution displays.

A larger one again for a phone home screen, which is displayed at app size and looks poor if the small version is scaled up.

Most site platforms and plugins accept one large square image and generate the rest, which is the practical route for a small business.

Supply the largest version you have and let the tooling produce the others rather than making each by hand.

A worked example

A business had no icon set, showing a blank page symbol in every tab.

Their first attempt uploaded the full logo, which at tab size was an unreadable grey shape.

They replaced it with the first letter of the business name, white on the brand colour, filling the square.

That was legible at every size, distinguishable in a row of tabs, and visible in dark mode.

The whole exercise took about twenty minutes including generating the sizes.

Nobody mentioned it, which is the expected outcome, and their tab was now findable among several open ones.

Check it actually changed

Because this is a setting that appears not to have worked.

Browsers cache icons aggressively, so the old one or the blank symbol frequently persists after you have uploaded a new file.

Check in a private window, or a browser you have not used on the site, rather than concluding it failed.

Then check a bookmark, and add the site to a phone home screen to see the large version.

People commonly upload a second and third file believing the first did not work, which produces a mess of files and no improvement.

While you are there

Two adjacent items usually missing at the same time, for the same reason.

The page title, which sits beside the icon and is what the tab shows when there is room. A title reading Home or Untitled tells somebody nothing about which tab is yours.

And the theme colour setting, which some mobile browsers use to tint the interface around your site, and which defaults to grey.

Both are single settings, both take a minute, and both affect the same moment as the icon.

Fixing the three together is a reasonable use of half an hour and closes off the whole category.

Keep the file with the logo files

A small housekeeping point that saves repeating this work.

The simplified square version you produce for the icon is useful elsewhere: a social profile picture, a listing image, an app-style tile, and anywhere a square crop is required.

Those places all crop a wide logo badly, and most businesses solve the same problem separately each time, producing three slightly different square versions.

Make one, store it alongside the other logo files, and note in the specification that it is the square version.

Then every future request for a profile image or a tile is answered by an existing file rather than by somebody cropping the logo again.

The counter-case

This is a small thing and should be treated as one.

No customer has ever chosen a business because of its tab icon, and a site with excellent content and no icon will outperform the reverse comfortably.

It also matters more for sites people return to or keep open, and less for one where somebody arrives, finds a phone number, and leaves.

There is a version of this attention that spends an afternoon on sixteen pixels while the contact page has the wrong number.

Set it once, properly, in twenty minutes, and do not think about it again.

The twenty minutes

  1. Simplify to one element or a letter.
  2. Give it a solid background.
  3. Make it square.
  4. Upload one large image and generate the sizes.
  5. Check in a private window.
  6. Check dark mode and a phone home screen.
  7. Fix the page title while you are there.

Step five prevents the usual confusion, since browsers cache icons hard enough that a correct upload looks like a failed one.

Why a full logo fails here is covered in the logo nobody can read at thumbnail size.

Frequently asked questions

Where does the favicon appear?

The browser tab, the bookmark list, history and address bar suggestions, and a phone home screen if somebody saves your site. It is the branding present when somebody returns to you.

What does having none cost?

Your tab becomes indistinguishable from every other unset tab, so somebody comparing several sites cannot find yours, and it reads as a site that was not finished.

Why not use the full logo?

Because a logo scaled to tab size becomes an unreadable smudge. Use a simplified mark or a single initial filling the square.

Why avoid a transparent background?

Because the icon then sits on whatever colour the browser uses, which changes in dark mode. A dark mark on transparent disappears against a dark tab bar.

Which sizes do I need?

A small one for tabs, a larger square for bookmarks, and a larger one again for phone home screens. Most platforms generate them from one large image.

Why does it look like it did not work?

Browsers cache icons aggressively. Check in a private window before uploading more files, which is how people end up with several and no improvement.

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.

Blank page symbol in your tab?

Use the first letter of your business name, white on your brand colour, filling the square. Twenty minutes.

Start a Conversation