It sits in the browser tab while somebody has your site open alongside fifteen others. It appears in the bookmark list, in the history menu, in the autocomplete suggestions when somebody types the first three letters of your name. On a phone it becomes the icon on the home screen if anybody saves your site. It shows up beside your listing in mobile search results, next to competitors who have one and competitors who do not.

For something that takes an afternoon at most, it does a disproportionate amount of work. And a large share of small business websites either skip it entirely or get it wrong in a way that is worse than skipping it.

What the absence actually signals

A site without a favicon does not display nothing. It displays the browser default, which is a generic page icon or a globe, and that icon reads as unfinished.

Nobody consciously registers this. Nobody has ever declined to hire a business because of a missing tab icon. But somebody comparing three sites in three tabs is making a rapid and largely unconscious assessment of which businesses look established, and two of those tabs have a mark while the third has a gray sheet of paper.

The effect is small and it is not zero, and the cost of removing it is an hour.

The worse version is a favicon that is present but broken. A logo squeezed into a square and rendered at the size of a fingernail, producing a gray smudge. That is actively worse than the default icon, because the default at least looks like an absence rather than an attempt that failed.

Your logo will probably not work

This is the part most businesses get wrong, and the reason is understandable.

You have a logo. The logo is the brand. Therefore the favicon should be the logo. The logo goes into the square, gets scaled down, and turns into an unreadable blur.

The problem is that a favicon is displayed at roughly the size of a lowercase letter in body text. Whatever renders at that size has to survive being reduced to a few dozen pixels across. Most logos cannot, because most logos contain a wordmark, or fine detail, or an illustration with internal lines that merge into each other when shrunk.

The test is simple and worth doing before designing anything. Take your logo, reduce it until it is about the width of a capital letter in a paragraph of text, and look at it. If you cannot tell what it is, it will not work, and no amount of cleverness in the export will save it.

What survives at that size

A short list, and it has been the same list for as long as favicons have existed.

A single letter. Usually the first letter of your business name, set in your brand typeface, at a weight heavy enough to hold its shape. This is the most reliable option available and it is what a large share of well executed small business favicons use.

Two letters, occasionally, if the letterforms are simple and the pairing is tight. Three is almost always too many.

A simple geometric mark. If your logo contains a symbol that works independently of the wordmark, and that symbol is built from a small number of solid shapes, it will usually survive. If it has thin lines, gradients, or overlapping transparent elements, it usually will not.

A recognizable silhouette. A shape strongly associated with what you do, rendered as a solid form with no internal detail. This works when the shape is genuinely distinctive and fails when it is generic, because a generic tool or house shape communicates a category rather than a business.

What does not survive: any word longer than about two characters, photographs, anything with a gradient, thin outlines, and detailed illustration.

Contrast is the whole game

A favicon sits on a background you do not control.

Browser tabs have their own coloring, which differs between light and dark settings, between browsers, and between the active tab and the inactive ones. Bookmark bars differ again. A phone home screen sits on whatever wallpaper the person chose.

This means two things. Your mark needs strong contrast against both light and dark, and it should not rely on a transparent background to look correct.

A white letter on a transparent background looks excellent on the designer's dark canvas and disappears entirely on a light tab bar. This is a common and invisible failure, because the person who made it never viewed it in the condition where it breaks.

The reliable approach is to give the icon its own solid background, in a brand color, with the mark in a contrasting tone on top. Then it carries its own context everywhere and never depends on what sits behind it. This is why so many recognizable app icons are a solid colored square with a simple shape on it, and the reasoning applies equally at small scale.

If you want to be thorough, modern browsers can be given a version that adapts to light and dark settings. It is a genuine improvement and it is optional. Solid background first, adaptive version later.

It is not one file

This is where most attempts go wrong on the technical side rather than the design side.

The favicon started as a single small icon file and has become a small family of assets serving different contexts. The specifics shift over time, but the categories have been stable for years.

A small icon for the browser tab, historically in the ICO format, which can contain several sizes in one file. Many setups now serve a PNG instead, and increasingly a scalable vector version that renders crisply at any size.

A larger square image for mobile platforms, used when somebody saves your site to a home screen. This one is bigger than people expect and it is the one most frequently missing, which produces a blurry upscaled version of the small icon.

A set of sizes referenced by a web application manifest, for platforms that install a site like an application.

A version sized for the situation where the icon is displayed larger, such as certain bookmark views and some search result presentations.

The practical approach for a business owner is not to learn all of this. It is to produce one high quality square source image, at a generous size, with a solid background and a simple mark, and then use a generator to produce the family from it. The generators handle the formats and give you the markup to paste into your page. The thing they cannot do is design a mark that works small, which is the part that actually requires judgment.

The caching problem

Favicons are cached more aggressively than almost anything else on a website, and this catches people out constantly.

You update the icon, reload the page, and the old one is still there. You clear the cache and it is still there. You try a different browser and see the new one, which convinces you it worked, and then your own browser keeps showing the old version for days.

This is normal and it is worth knowing before it happens, because the usual response is to assume the upload failed and to do it again three times.

Two practical consequences. First, test in a browser that has never visited your site, or in a private window, rather than trusting your own. Second, if you are changing an established icon, expect a period where different people see different versions, and do not panic about it.

Where people actually get it wrong

A short list of the failures that recur, roughly in order of frequency.

No favicon at all, leaving the browser default.

The full logo including the wordmark, squeezed into a square and illegible.

A transparent background with a light mark, invisible against light tab bars.

Only the smallest size provided, producing a blurred icon when saved to a phone home screen.

An icon that duplicates a competitor's, usually because both chose the same generic category symbol.

A photograph, which turns into colored mud.

An icon that does not match anything else in the brand, because it was made separately from the logo by somebody else at a different time.

The last one is worth dwelling on. The favicon should look like it belongs to the same business as the site. If your brand color is a deep green and your favicon is blue because it came from a template, that is a small inconsistency in a place where consistency is cheap.

How to check it properly

Look at it in a tab, next to other tabs, at normal screen brightness. Not zoomed in, not on a design canvas.

Look at it in both light and dark browser settings.

Save the site to a phone home screen and look at the icon among real applications, which is the least forgiving context available.

Ask somebody who does not know your business what the letter or shape is. If they hesitate, it is not working.

Check that it appears when your site is bookmarked, and that it appears in the history list.

That is about fifteen minutes of checking and it catches essentially everything.

The wider point

A favicon is a small commitment that keeps paying, and it belongs to a category of work that first year businesses systematically underrate: the things that are finished once and then quietly do their job forever.

There is no maintenance, no subscription, and no ongoing attention. You design it once, and it appears in tab bars and bookmark lists and home screens for as long as the business exists, doing a small amount of recognition work every time somebody sees it.

Most decisions in a first year business are not like that. Most require attention again next month. The ones that do not are worth identifying and finishing properly, and this is one of the cheapest of them.