Open your browser right now and look at the tabs at the top. See those little icons next to each page title? That's a favicon — short for "favorite icon" — and it's one of the smallest, most overlooked details on your website.
Here's the thing: your customers notice when it's missing. A blank tab with a generic globe icon tells them your site was thrown together. A custom favicon tells them you pay attention to the details. For a local business in Ontario — whether you're a plumber, a restaurant, a salon, or a retail store — that tiny 16x16 pixel image is doing real branding work.
What a Favicon Actually Does
A favicon isn't just decoration. It serves three practical purposes:
- Brand recognition. When a customer has eight tabs open, your favicon helps them find your site again. That's the difference between them coming back and giving up.
- Professionalism. A missing favicon is the website equivalent of showing up to a meeting with a wrinkled shirt. It's a small detail that signals "we're not really set up properly."
- Trust. Bookmark a site without a favicon and you get a blank or generic icon saved to your home screen. On mobile, that blank icon looks like spam. A real favicon looks like a real business.
What Happens When You Skip It
We audit a lot of local business websites. Roughly 40% of the small business sites we review in Ontario either have no favicon at all or are still using the default icon from their website builder (Wix, Squarespace, or a blank WordPress favicon).
Here's what that costs you:
- Lower bookmark return rate. Users who bookmark your site without a favicon are less likely to find and click it later. On mobile home screens, a blank icon gets buried and forgotten.
- Reduced trust on first visit. A blank tab icon is a subtle red flag. It's the kind of thing a potential customer doesn't consciously notice — but it contributes to a "this place feels less established" impression.
- Weaker brand recall. Your logo appears on your homepage, your footer, and your social media. But if it's not in the browser tab, you're missing one more touchpoint that reinforces your brand every time someone interacts with your site.
What Makes a Good Favicon
A favicon is tiny — usually 16x16 or 32x32 pixels. That means you can't just shrink your full logo and call it a day. Here's what works:
- Use a simplified mark. Pick the single most recognizable element from your logo — a letter, an icon, a shape. Drop the tagline, the full company name, and any fine detail.
- Use strong contrast. A gold star on a navy background works. A light gray letter on a white background doesn't. At 16 pixels, contrast is everything.
- Keep it one or two colors. Gradients and multi-color logos turn into muddy blobs at small sizes. Pick your primary brand color and one accent.
- Make it square. Favicons render as squares. A rectangular logo will get cropped or stretched. Design or crop your favicon to a 1:1 ratio.
How to Add a Favicon (Step by Step)
Adding a favicon takes about five minutes. Here's how:
- Create your icon. Start with a 512x512 pixel square image. Use your brand's primary color and a simplified version of your logo mark. Export it as a PNG.
- Generate the sizes you need. You'll want at least three files: a 16x16
.icofile for older browsers, a 32x32 PNG for modern tabs, and a 180x180 PNG for Apple touch devices (the icon that appears when someone adds your site to their iPhone home screen). A free tool like RealFaviconGenerator does this in one click. - Upload the files to your site. Place them in your website's root directory or in an assets folder.
- Add the link tags to your HTML
<head>. You need these three lines:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
That's it. Upload, add the tags, clear your cache, and refresh. Your favicon should appear in the browser tab immediately.
Using a Website Builder?
If you're on Wix, Squarespace, or Shopify, you don't need to touch any HTML. Each platform has a favicon setting in their site settings panel. Upload a square PNG (at least 256x256) and the platform handles the rest. Just make sure you actually do it — the default builder favicon is the most common version we see on unfinished local business sites.
The Mobile Factor
Here's something most business owners don't think about: when someone saves your website to their phone's home screen, the icon that appears is your apple-touch-icon — not your logo, not your homepage image, but that specific favicon file.
Over 60% of local business searches happen on mobile. If a customer saves your site and sees a blank or generic icon next to all their other apps, it looks unprofessional. A proper favicon makes your website feel like a native app on their phone — and that's a trust signal that compounds over time.
What We Do for Our Clients
Every website we build at MWL Media includes a custom favicon set — the .ico file, the PNG variants, and the Apple touch icon. It's part of the standard package, not an add-on. We take your logo, simplify the mark, apply your brand colors, and generate all the sizes you need.
Our Starter plan at $549 one-time includes a full favicon set. Our Growth plan at $125/month keeps everything managed and updated. Whether you're a contractor, a restaurant owner, a salon, or any local Ontario business, we handle the details so your site looks polished on every device, in every browser tab.
If your current site is missing a favicon, it's a five-minute fix. But if your site is missing a favicon, there's a good chance it's missing other things too — slow load times, poor mobile layout, no booking system, outdated SEO. That's where a proper rebuild pays for itself.
Ready to get found online?
Get a free quote in 10 minutes. Your website live in 48 hours.
Get a Free Quote →Questions? Call or text us at (647) 362-2017. We're a local Ontario agency — we build websites that work, down to the last pixel.