The Missing Favicon: The Tiny Detail That Makes Your Site Look Unfinished in the Tab
That generic icon in the browser tab whispers "unfinished site." Here's what a favicon is, why it matters, and how to set it up right.
You open ten tabs and, between the crisp logos of other companies, yours shows a blank sheet of paper or a generic globe. It's a tiny detail, but a visitor's brain reads it instantly: "something here isn't finished." Nobody says it out loud, but the impression forms in silence.
The favicon is the tiny icon in the corner of the tab, next to the page title. It also shows up in bookmarks, in history, in the tab list on your phone, and sometimes even in Google results on mobile. It's one of the cheapest details to fix on a website and, at the same time, one of those that separates "amateur" from "serious business." Let's see exactly why it matters and how to set it up properly, not half-heartedly.
What a favicon actually is, and where people see it
Favicon comes from "favorites icon" – the little icon the browser puts next to the page title. It's small, but it shows up in more places than you'd think:
- in the open tab, next to the page name;
- in the bookmarks bar and the favorites list;
- in browsing history and address-bar suggestions;
- in the tab list on your phone, where the title almost disappears and mostly the icon remains;
- on mobile, sometimes even next to your result in Google.
When it's missing, the browser drops in a generic symbol – a blank page or a globe. Surrounded by other sites with their own icons, yours is the only one that looks "empty." It's not a catastrophe, but it's exactly the kind of detail that says "the work isn't finished."
Why such a tiny detail dents your credibility
People don't judge a website with a checklist in front of them. They feel it. And the small signals – a missing favicon, an inconsistent font, a stretched photo – add up into an overall impression of "care" or "lack of care."
The favicon is special because it appears exactly when someone comes back to you. Someone who left your tab open among seven others has to spot you at a glance. With a clear icon, they find you instantly. Without one, you're the "blank page" they close by mistake.
Then there's the trust angle: if the company didn't notice this detail, visible from the very first second, what other, less visible things got skipped? Unfair, maybe. But that's how perception works.
What a good favicon looks like (it's not your logo shrunk down)
The classic mistake is taking the full logo, text and all, and cramming it into a tiny square. At that size, the text turns into a smudge. A good favicon follows a few rules:
- Simple and recognizable at very small size – a single letter, a symbol, a clear shape.
- Good contrast, so it reads on both a light tab and a dark tab.
- A background that doesn't vanish – avoid a fully transparent background if the shape is white, or it disappears on light themes.
- The same identity as the rest of the brand: same color, same spirit.
If you have a logo with a long name, use just the initial or the symbol from it. The goal isn't to fit everything in, but to be recognized at a glance – like a button your eye lands on without reading.
How to add it, step by step (whatever the platform)
On most modern platforms, the favicon goes in from a single place, no code needed.
- On WordPress.com or classic WordPress: Customize → Site Identity → upload a "Site Icon." It handles the sizes for you.
- On other platforms (Wix, Shopify, etc.): look in settings for "favicon" or "site icon."
- On a custom-built site: you add the icon files and a few lines in the <head> (favicon.ico, a larger PNG version, and an apple-touch-icon for when someone saves the site to their phone's home screen).
Two practical tips: use a clean, square image of at least 512×512 px as your source, so it looks good everywhere. And after you set it, if you still see the old icon, that's the browser cache – force a reload or open it in a private window.
Common mistakes and how to avoid them
A few traps I see often:
- An icon made for one small screen – you upload a tiny image and it looks blurry on high-resolution phones. Start from a large, square source.
- Text too small – if the whole logo goes in, at 16px it becomes a tangle. Simplify.
- A color that vanishes – white on transparent looks ghostly on light themes; give it a background or a visible shape.
- "I set it, but nothing changes" – it's almost always cache. Don't set it twice; force a reload instead.
- Forgotten on subpages – on a well-built site, the favicon is the same everywhere; check the inner pages, not just the homepage.
None of these is fatal on its own, but together they're the difference between "careful" and "left half-done."
A small signal within a bigger whole
A missing favicon is rarely the only issue. It usually comes bundled with other small skipped details: the tab title says "Home" instead of the company name, the WhatsApp share image is missing, the menu behaves oddly on mobile. Each one, on its own, seems unimportant. Together, they decide whether you look like a business people can rely on.
That's how we work at MPO Web Studio: not just "a pretty site," but the details that quietly convince – favicon, correct titles, share images, speed. We work remotely, across the whole country, and we can build you a demo of your site first, for free, so you see exactly how it would look – favicon included. If you just noticed the blank page in your tab and want to fix it (and the rest of the details along with it), message us on WhatsApp and we'll sort it out.
Frequently asked questions
Does the favicon affect my Google ranking?+
Not directly – it's not a ranking factor. But on mobile Google sometimes shows your favicon next to your result, and a clear icon makes you easier to spot and click. So it helps indirectly, through trust and recognition, not through the algorithm.
What size and format should it be?+
Start from a clean, square image of at least 512×512 px. Modern platforms generate all the smaller sizes from that automatically. For a custom site you usually use a favicon.ico, a PNG version, and an apple-touch-icon for saving to a phone's home screen.
I set it, but I still see the old icon. Why?+
It's almost certainly the browser cache, which holds favicons aggressively. Force-reload the page, clear the cache, or open the site in a private window. It usually updates shortly; don't set it twice out of worry.
Can I just use my logo as the favicon?+
Only if it's simple. A logo with a long name turns into a smudge at small size. It's best to take just the initial or the symbol from the logo, keeping the brand color, so you're recognized at a glance.
Is this something I can do myself, or do I need someone?+
On WordPress, Wix, or Shopify you can add it yourself from settings in a few minutes. On a custom site, or if you want the rest of the details done properly too (titles, share images, speed), it's worth having someone who handles them all at once.
7 mistakes that drive clients away from your website
Leave your email and get the guide right here, instantly. No spam.
Want to see what your business's website could look like?
Message us on WhatsApp and we'll build you a free demo website with your business name on it. See it first, then decide — no strings attached.