What is a favicon – and why your website looks unfinished without one

A favicon helps your website stand out from other icons in a crowded browser bar and makes it easy for people to return to your page.

This article in brief

Favicons are the tiny icons that appear in a browser tab, along with every other website you’ve visited in other tabs. Many businesses ignore favicons, which is a mistake.

This article shows why they matter, how to create a standout one, and what colours and styles help visitors remember your website. There is even a quick step-by-step for creating your own if you don’t have a web developer who can help you.

Key takeaways:

  • Favicons are essential for brand recognition, trust, and return visits.
  • A missing favicon makes your site look like it was half-built.
  • Colour, shape and simplicity matter more than your full logo.
  • You can make and upload one in minutes.

If you are not using one yet, your website is being left behind.

What is a favicon and why does your website need one?

A favicon is the small icon that shows up in a browser tab. It also appears in bookmarks, mobile browser tab previews, and even some search engine results.

When you have twenty tabs open (which I definitely do not recommend, although I do it all the time!), the favicon helps you quickly return to what you are looking for.

Before you read any further, take a look at your own browser tabs.

Which icons stand out the most to you?

Which ones are harder to spot or just blend into the background?

Here’s part of my browser bar, showing the favicons of websites I’ve visited:

Favicons showing in a website browser bar

You will likely notice (in my example above, or your own) that bold colours, single letters, or unique shapes make certain tabs easier to find.

But it’s not the same for everyone.

What works for one person might not work for another.

That is why getting your favicon right is a blend of best practice and personal judgment.

Without a favicon, your website sits there looking like a generic tab, or a globe or WordPress icon. That tells people: “We did not finish the job”.

And if you are spending money getting visitors to your site – via ads, social media, SEO, whatever – but are not giving them an easy way to find you again in their sea of tabs, that’s just wasteful.

How to make your favicon stand out in a sea of tabs

You have about 16×16 pixels to work with. It’s not much, so clarity is everything.

Some tips:

  • Use a single bold colour or two-tone contrast. Think orange on black, white on red, or green on dark grey.  Avoid what everyone else is doing (typically: blue).
  • Avoid detail. Your full logo might look great on a brochure, but reduced to 16×16 it often turns into a smudge.
  • Initials or symbols work best. Think BBC, Zoom, or Trello. They are easy to spot in a split second.
  • Make it square. Favicons are always square, and non-square images will either distort or centre oddly.

Some common mistakes for you to avoid:

  • Too much detail (no one can read your slogan at that size).
  • Pale colours on white (vanishes into the background).
  • Uploading a non-transparent background (ugly white box around it).

Favicon icons do not just sit in browser tabs either. They often appear:

  • In bookmarks and favourites folders
  • In mobile browser tab previews
  • In SEO previews on some AI search results

So they are not just cosmetic. They help people find you again and return.

 

What colours should you use in a favicon?

There is no one “best” colour. But there are some rules that work:

  • Go for contrast. Light on dark or dark on light works every time.
  • Stick with your brand palette but avoid just copying your logo if it becomes unrecognisable at small size.
  • Test how it looks in a real tab. What looks great on Canva might be unreadable in a real browser.

If you have a brand colour that already stands out, use it. If your logo has two key colours, use those in simple blocks or shapes.

Think of your favicon as a traffic sign, not a poster. It is there to grab attention, not explain everything.

More reasons to get your favicon sorted out now

Here are a few more ways favicons help your website:

  • Trust signal. A missing favicon can make a site look like it was thrown together.
  • Reducing friction. People scanning their tabs will find your site faster and feel warmer towards you than if they had to hunt you out from within their browser tabs.
  • AI and search previews. Some search previews (including AI ones) pull in favicons. Missing one might make you look like a placeholder site.

How to create and add a favicon (a simple step-by-step)

You probably have a web developer who can do this for you, but it not, here is how you can create your own favicon for free in under 10 minutes:

  1. Go to https://realfavicongenerator.net or https://favicon.io (there are others online – just search for favicon generators).
  2. Follow the guidance.

Most website platforms (like WordPress or Squarespace) have a dedicated place for adding a favicon, often buried in the “Site Settings” or “General Settings” section.

If you have a web developer, then great – let them help you.   If not, you just need 10 minutes and a bit of common sense on colour and shape.