Open ten browser tabs and try to find the site you want. You won’t read the titles — you’ll scan the little icons. That 16-pixel square is the favicon, and it’s doing more work for your brand than almost anything else that small on the internet. And yet an astonishing number of business websites don’t have one. They show the browser’s default blank-page icon instead — the little grey document that quietly tells every visitor the site isn’t quite finished. Here’s what a favicon actually is, why it matters, and how to get yours sorted in about five minutes.
What a favicon actually is
A favicon (short for “favourite icon”) is the small image browsers show in the tab next to your page title. The classic format is favicon.ico, a special file dating back to Internet Explorer that can hold several sizes inside one file — 16, 32 and 48 pixels. Modern browsers also accept plain PNGs. It appears in more places than the tab: bookmarks and bookmark bars, browser history, shortcut icons, and the home screen when someone saves your site on their phone. One tiny image, many jobs.
Why it matters more than its size suggests
Nobody ever chose a supplier because of a favicon. But it works at the level of first impressions and findability:
People scan tabs, not titles
With a dozen tabs open, titles are truncated to a few characters. The icon is the recognisable bit. No icon, no recognition — your tab is just another grey rectangle.
The blank icon says “unfinished”
Visitors can’t always articulate it, but a site with the default browser icon feels less cared-for than one with a proper mark. It’s the digital equivalent of an unpainted front door.
Bookmarks and home screens
A bookmarked site with a real icon is easier to spot and revisit. On phones, the icon you supply becomes the app-like tile on the home screen. Without it, you get a generic screenshot thumbnail.
The sizes you actually need
Here’s the honest, complete set — the reason “just upload a PNG” advice falls short:
favicon.ico (16, 32, 48 pixels in one file)
Still the safest default. Browsers have requested /favicon.ico automatically for decades, and the multi-size format means the browser picks the sharpest size for the context.
PNGs at 16, 32 and 48 pixels
What modern browsers actually prefer when you point them at files with link tags. Crisp at each size, no scaling guesswork.
Apple touch icon (180×180)
What iPhones and iPads use when someone saves your site to their home screen. One honest warning: iOS ignores transparency and fills it with black — a transparent logo becomes a black square. Give it a background colour.
Android icons (192×192 and 512×512) plus a manifest
What Chrome on Android uses, described in a small manifest.webmanifest file. Needed if you want your site to look right when installed as an app-like shortcut.
Five favicon mistakes we see everywhere
- No favicon at all. The most common. Two minutes now beats looking unfinished forever.
- One stretched 16-pixel image. A single tiny file scaled up looks blurry everywhere else. Each size should be rendered properly.
- A transparent logo on iPhone. As above: transparency becomes black on iOS home screens. White or a brand colour background fixes it.
- A detailed logo at 16 pixels. Fine print and thin lines vanish. A simplified mark — one letter, one shape — reads far better.
- Never testing it. Favicons cache aggressively. After installing, hard-refresh or open a new tab before deciding it “didn’t work”.
Make yours in 5 minutes (4 steps)
Doing all of the above by hand means graphics software, an ICO converter and a snippet written from memory. Our free Favicon Generator does it in one pass:
Step 1 — Upload your logo
Drag in a PNG or JPG, ideally 512×512 or larger. Nothing is uploaded anywhere — it all happens in your browser.
Step 2 — Style it
Pick a background (transparent, white, dark navy or Altus blue) and padding. If your image isn’t square or is too small, the tool warns you now — not after you’ve installed a blurry icon.
Step 3 — Check the live preview
See every size rendered, plus a mock browser tab showing your icon at a real 16 pixels. What you see is what every visitor gets.
Step 4 — Download and install
Grab each file individually or everything as one zip (manifest and snippet included), then copy the head snippet. Upload the files to your website’s main folder, paste the snippet, reload.
Installing it properly
The files go in your website’s root folder — the same folder your homepage lives in. The snippet goes inside the head section of your pages, before the closing head tag. On WordPress, you can also set the 512-pixel icon under Appearance → Customise → Site Identity, but the full file set plus the snippet is what covers every browser and device. After installing, don’t panic if the old blank icon lingers: browsers cache favicons hard. A hard refresh (Ctrl/Cmd + Shift + R) or a fresh tab usually reveals the new one.
FAQs
Do I really need a favicon if my site just launched?
Yes — especially then. It’s a two-minute job that removes one more “unfinished” signal. Do it on day one and never think about it again.
Can I just use my full logo?
If it’s readable at 16 pixels, yes. Most full logos aren’t — text becomes smudge. A simplified version (initial letter, icon mark) almost always works better at favicon sizes.
Why isn’t my favicon showing after I uploaded it?
Almost always caching. Browsers hold onto the old (or missing) icon aggressively. Hard-refresh, try a private window, and give it a few minutes.
Is the .ico format still needed?
For the widest compatibility, yes. Browsers still request /favicon.ico by default, and the multi-size format covers old and new contexts in one file. It’s cheap insurance alongside the PNGs.
The favicon is the smallest brand asset you’ll ever make and one of the most-seen. Five minutes, one upload, every size done — that’s the whole job.
Want the rest of your website brought up to the same standard? Book a free 15-minute consultation — we’ll review your site and tell you exactly what needs fixing, in plain English.
