Site Tip · Building trust

The tiny icon in the browser tab

Open ten tabs in your browser and look at the row of little icons. Now picture your own site in that row with a blank page or a generic globe next to it. That small gap is easy to fix, and fixing it makes your site look finished.

What a favicon is and where it shows up

A favicon is the small square icon that appears next to your page title in a browser tab. It also shows up in bookmarks and browser history. Sometimes it appears next to your site name in Google search results on a phone.

Most owners never think about it, but customers see it every time they have your site open. If you don't set one, the browser fills in a blank page or a generic icon. That tells visitors nobody finished the job.

Why it matters for trust

People judge a site in seconds, and they use small clues to do it. A matching icon is one of those clues. It says the business pays attention to details.

It also helps people find you again. Someone who opens your site next to several others can spot your tab by its icon instead of reading every title. The same goes for a bookmark in a long list.

How to make and add a favicon

You don't need a designer for this. Follow these steps:

Start with your logo. If it is wide or has a long name in it, pick just the symbol or the first letter.
Make it square. A simple square image with a plain background works well.
Keep it bold and simple. The icon displays very small, so fine lines and tiny text turn into a blur.
Export it as a PNG or an ICO file. A larger source image, such as 512 by 512 pixels, gives you room to scale it down cleanly.
Upload it in your website builder's settings. Most builders have a favicon or site icon field. If your site is custom, ask your developer to add it to the page header.

Common mistakes and how to check your work

The biggest mistake is shrinking a full logo until it is unreadable. Test by viewing your icon at about the size of a thumbnail. If you can't tell what it is, simplify it.

Another mistake is forgetting to check after you upload. Browsers hold on to old icons, so you may need to refresh the page a few times or open the site in a private window. Check on your phone too.

Last, make sure the icon works on both light and dark browser themes. A dark icon on a transparent background can disappear in dark mode. A solid colored square avoids that problem.

If you would like help, Modestius builds and fixes websites for small businesses, and this is a detail we check on every site.

Questions owners ask

Is a favicon the same as my logo?

No. It is a small, simplified version of your logo, usually just a symbol or a letter in a square. Your full logo has too much detail to read at that size.