Favicons and app icons

Why it is noticed

Somebody with several tabs open identifies yours by the icon rather than by reading. A missing one shows a blank placeholder, which reads as a site that was not finished.

It also appears in bookmarks, in history, in search results on some platforms, and on a phone home screen if anybody saves your site. That is more surfaces than its size suggests.

None of this affects whether the site works. It affects whether the site looks looked-after, which is a real impression and a cheap one to get right.

A logo is usually the wrong file

At the size a favicon is displayed, almost no logo survives. Fine detail disappears, a wordmark becomes a grey smear, and anything with a tagline becomes noise.

The usual answer is a single letter, a monogram, or the one distinctive shape from the mark, on a solid background. Simplicity is the requirement rather than a compromise.

Our page on logos covers the relationship. A favicon is a separate design problem that happens to share an identity, not a shrunken logo.

The sizes you actually need

The list below covers every real surface for a small business site. Most website tools generate the whole set from one upload, and if yours does, use it.

• A small icon for the browser tab
• A larger one for high-density screens
• A square icon for a phone home screen
• A version that works on a dark browser theme
• A scalable file where the platform supports it
• A site manifest naming them, for phones
• One consistent design across all of them

Test it small and in context

Look at it in an actual browser tab, beside other tabs, rather than in a design view. That is the only test that matters and it takes seconds.

Check it against both a light and a dark browser theme. A dark mark on a transparent background disappears entirely for anybody using a dark interface, which is a common and invisible fault.

Then look at it on a phone home screen if you support that. Square cropping treats a wide mark badly, which is why the square version belongs in the set.

Where it goes wrong

The commonest fault is simply never replacing the platform default, so a site ships with a builder's own icon in the tab. Visitors do register that, even if they could not say what they registered.

The second is a transparent background, which looks correct on light and vanishes on dark. A solid background avoids the problem entirely and costs nothing visually.

The third is caching. Browsers hold onto favicons stubbornly, so a change frequently appears not to have worked when it has. Check in a fresh browser before assuming.

The social preview is the bigger version

The image shown when somebody shares your link is the same class of detail at a much larger size, and it is more consequential because it appears wherever the link is posted.

Our page on which images belong covers the wider choice. The two are usually set up in the same sitting and are forgotten in the same way.

Both belong on the pre-launch list. Our page on the launch checklist covers the surrounding pass, and these two are the easiest items on it.

How much time this deserves

One hour, once, and then never again. It is a fixed cost with no ongoing maintenance, which makes it one of the better returns available on a small business site.

It is not worth commissioning separately. Whoever made or supplied your mark can produce a simplified version, and most website tools generate the size set automatically.

And it should never change. People find your tab by its icon, so a new favicon reads as a different site, which is the opposite of what it exists to do.