Open a browser with ten tabs and you can still find the one you want in a second. You are not reading the titles — you are scanning the little pictures. That small image is the favicon, and it does far more work than its size suggests.
Most Malaysian SME websites either get it right without thinking or skip it completely. A blank or default icon feels like a small thing, but small things shape first impressions. This guide from the team at ZenWeb explains what a favicon is in plain language: where it appears, why it builds trust, the sizes you need, and how to set one up properly.
Before we get into the detail, the short video below from Simplilearn covers the bigger picture a favicon sits inside — how UI and UX design shape the first impression a website makes. After that, we break the favicon down step by step.
Source video: Simplilearn on YouTube
Quick Answer: A favicon (short for “favourite icon”) is the small square image a website shows in the browser tab, bookmark list, and history, next to the page name. It is usually a simplified version of a brand logo, and its job is to help people spot and recognise your site at a glance.
The name goes back to the early web, when browsers added a way to “favourite” a page and show a small icon beside it. The image lived in a file called favicon.ico in the site’s root folder, and browsers looked for it automatically. The idea stuck, and today every serious website has one.
Think of it as a name tag for your site. Like your domain name, it is a small but lasting part of your online identity. You set it once in your content management system or theme, and it follows every page you publish.
In practice, a favicon is just three things working together:
Quick Answer: A favicon appears anywhere a browser or app needs a small picture for your site: the browser tab, the bookmarks bar, browsing history, pinned tabs, the phone home screen when someone saves your site, and increasingly next to your listing in Google’s mobile search results.
That last spot matters most for marketing. On a phone, Google shows a small favicon beside many search results, so your icon is part of the first impression before anyone clicks. A clear icon there can lift your click-through the same way a tidy listing does. Here is where your favicon does its work:
A favicon will not earn you backlinks or move you up the rankings on its own — that is the job of good SEO and strong content. But where it appears beside your search listing, it quietly supports the click.
Want a website that looks credible from the first glance?
We design fast, trust-building sites for Malaysian businesses, with the small details handled. See our web design service →
Quick Answer: Not as many as you would think. Across the Malaysian SME sites we audit, only about a third carry a custom favicon at every size a modern browser needs. The rest run a blurry single-size icon, a default platform logo, or nothing at all — a small, easy gap most sites never close.
The chart below groups sites by their favicon setup. A proper favicon is one of the cheapest fixes in web design, yet it is also one of the most commonly skipped.
| Favicon setup | Share of sites | |
|---|---|---|
| Custom favicon, all key sizes | 38% | |
| Default CMS or platform icon | 28% | |
| Custom favicon, 16×16 only | 24% | |
| No favicon at all | 10% |
Source: ZenWeb operational data, 500+ Malaysian SME sites audited, 2024–2026. Directional, not a guarantee.
Quick Answer: Because people judge a site in seconds, and small signals carry weight. A clean, branded favicon tells visitors a real business cares about the details; a blank tab or default globe hints at a rushed or unfinished site. The icon is tiny, but the trust signal is not.
First impressions are mostly visual. The favicon is one of the first branded things a visitor sees, often before the page finishes loading. It works alongside your call to action and overall UI and UX design to make a site feel trustworthy. The table indexes how different favicon states tend to affect that first-glance trust.
| Favicon state | What it signals | Relative trust |
|---|---|---|
| No favicon (blank or globe) | Unfinished, or not sure it is safe | 100 |
| Default CMS or platform icon | A template, not really branded | 108 |
| Blurry or oversized custom icon | Some effort, but careless detail | 124 |
| Clean branded favicon, all sizes | A real business that cares | 141 |
Illustrative, based on ZenWeb client first-impression testing patterns, 2024–2026. Your numbers will vary.
Quick Answer: A modern site needs more than one favicon file. At minimum you want 16×16 and 32×32 for browser tabs, a 180×180 Apple touch icon for iPhones, and 192×192 plus 512×512 for Android and web apps. A scalable SVG and a classic favicon.ico round out the set.
One 16×16 icon used to be enough. On today’s high-resolution and mobile screens it looks blurry, so a small set of sizes is now the standard. The good news: a free favicon generator builds the whole set from one image. This is the kind of detail a responsive web design build handles for you.
| Size | Format | Where it is used |
|---|---|---|
| 16×16 | ICO / PNG | Browser tab, address bar |
| 32×32 | ICO / PNG | Retina tabs, Windows taskbar |
| 180×180 | PNG | Apple touch icon (iPhone, iPad) |
| 192×192 | PNG | Android home screen, web app |
| 512×512 | PNG | App install splash on Android |
| Scalable | SVG | Modern, dark-mode-aware tab icon |
Reference: standard favicon sizes and formats for modern browsers and devices, 2026.
Not sure your site is set up right on every screen?
We build sites that look sharp on every device, favicon and all. Compare our web design pricing →
Quick Answer: The favicon has quietly grown from a single 16-pixel icon into a small family of files. As retina screens, iPhones, Android home screens, and dark mode arrived, each one added a size or format. A site that still ships one tiny icon looks dated next to one with the full set.
You do not need to memorise this history — your CMS or a generator handles it, and the files simply live in your site’s root on your web hosting. But it explains why one icon is no longer enough. The timeline shows how the requirements grew.
| Year | What a site needed | Why it changed |
|---|---|---|
| 2005 | One favicon.ico (16×16) | Browsers auto-looked for /favicon.ico |
| 2011 | Add 32×32 PNG | Retina screens made 16px look blurry |
| 2014 | Add 180×180 Apple icon | iPhones let users save sites to home screen |
| 2018 | Add 192 & 512 PNG | Android and web apps needed bigger icons |
| 2023 | Add SVG, dark-mode aware | Scalable icons and dark UI themes spread |
| 2026 | Full ICO + PNG + SVG set | One blurry size now looks dated |
Illustrative timeline compiled by ZenWeb, 2026. A guide to how favicon needs have grown.
Quick Answer: Adding a favicon takes about ten minutes: design a simple square icon from your logo, use a free generator to export every size, upload the files or set them in your theme, add the link tags to your site’s head, then clear your cache and test across browsers and a phone.
Most content systems make this easy — WordPress, Shopify, Wix and others have a built-in favicon or “site icon” setting. If yours does, you may only need the first three steps. Here is the full process:
Quick Answer: The usual favicon mistakes are easy to fix: shipping only a tiny 16-pixel icon, cramming a full logo with text into a square, using a default or stock icon, forgetting the mobile and Apple sizes, and never testing after a redesign so a broken icon lingers for months.
Run your own site past this short list. Most of these take minutes to put right and instantly tidy up how your brand looks in the tab.
A favicon is a small detail, but the web is built from small details that add up to trust. It is the name tag in the tab, the icon in a bookmark, and the little picture beside your listing in mobile search. Get it right — a clean, branded icon at every modern size — and your site looks a step more professional everywhere it appears.
A website is a stack of these quiet signals: your domain name, your speed, your call to action, and yes, your favicon. If you would like them all handled properly from the start, our web design service builds every page — favicon included — around looking credible and turning visitors into enquiries.
A favicon is the small icon a website shows in the browser tab, bookmarks, and history next to the page name. It is usually a simplified version of a brand’s logo, and its job is to help people recognise and trust the site at a glance.
There is no single size. A modern site uses a small set: 16×16 and 32×32 for browser tabs, 180×180 for Apple devices, and 192×192 plus 512×512 for Android and web apps. A free favicon generator builds all of them from one image.
Not directly — a favicon is not a Google ranking factor. But Google shows favicons beside results on mobile, so a clear icon can support your click-through rate. Think of it as a trust and recognition signal rather than a ranking one.
Use a mix. ICO and PNG cover browsers and devices, and an SVG adds a sharp, scalable, dark-mode-aware option in modern browsers. Most favicon generators export ICO, PNG, and SVG together, so you do not have to choose just one.
In WordPress, go to Appearance, then Customise, then Site Identity, and upload your image under “Site Icon”. WordPress generates the sizes and adds the code for you. After saving, clear your cache and check a tab and a phone to confirm it shows.
Ready for a website that earns trust from the first click?
Book a free 30-minute strategy session. We will review your site, your branding details, and your competitors, then give you a concrete 90-day plan to look more credible and turn more visitors into enquiries.
Complete the form and our team will contact you to discuss your goals. Let’s grow your business.
Online
