What a Favicon Is and Why It Matters

Where it actually appears

More places than the browser tab, which is why it matters more than its size suggests.

• The browser tab, where it is the only identifier when several are open.
• Bookmarks and the reading list, where it is how a saved page is recognised.
• Browser history, alongside each entry.
• The address bar suggestions as someone types.
• A phone home screen, where a saved site becomes an icon among apps.
• Some search and social contexts, where a small site icon appears beside a result.

The tab case is the one that matters most in practice. Someone comparing three contractors has three tabs open, and the favicon is how they find yours again.

Why the absence is noticed

Not consciously, in most cases. A missing favicon shows a generic document or globe placeholder, which reads as unfinished.

It is the same class of signal as a copyright year several years out of date: nobody remarks on it, and it contributes to an impression. For a business asking someone to trust it with a deposit, small signals of carelessness accumulate.

It is also among the cheapest things on any website to get right, which is why its absence is disproportionately telling.

What makes a good one

Simplicity, because it is displayed at about sixteen pixels in a tab. That is smaller than a typed character.

A full logo with text reduces to an unreadable smudge at that size. What works is one element: a single letter, a monogram, or the distinctive shape from your logo if it has one.

Strong contrast matters, and it should work on both light and dark browser backgrounds, since tab bars differ. Testing on both is thirty seconds and catches the icon that disappears in dark mode.

The files to produce

Historically this required a long list of sizes. Modern practice has consolidated considerably, and the four above cover essentially everything a small business site needs.

The phone home screen version is the one most often missing, and it produces the poorest result: a screenshot of the page shrunk to icon size, which is illegible.

The common failures

• Using the full logo, which becomes unreadable at tab size.
• A transparent background that vanishes against a dark tab bar.
• Leaving the platform's default, so your site shows a generic builder icon.
• Only the small size, so the phone home screen version is a blurred upscale.
• Not updating it after a rebrand, which leaves the old mark in tabs and bookmarks.
• Caching, which is why an updated favicon appears not to have changed. Browsers hold onto them stubbornly.

That last point causes confusion. After replacing one, check in a private window or a different browser rather than concluding it did not work.

Producing one without a designer

If you have a vector logo, the icon is usually an existing element of it isolated and placed on a solid square.

Where there is no logo, a single letter in your brand colour on a contrasting square is entirely adequate and better than nothing. It is recognisable, it scales, and it takes ten minutes.

Several free generators produce the full set of files from one square image, which removes the technical part. What they cannot do is decide what the image should be, which is the part worth thinking about for five minutes.

Checking yours

Open your site alongside four other tabs and look at the tab bar.

Ask whether you could pick yours out at a glance, and whether it looks like your business rather than like a smudge. Then save the site to a phone home screen and look at the icon there.

Both take a minute, and on a surprising number of small business sites the answer to at least one is no, which is the same category of small unfinished detail as the file set covered in logos: what you actually need.

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.