What Is a Favicon? A Guide for Small Business Websites

The dessert shop I buy from near my home has a small rubber stamp. It is square, smaller than a thumbnail, carved with a single flower. The owner presses it onto every paper bag before handing it over. Whenever that bag ends up on our dinner table next to five or six bags from other shops, I pick the right one every time without reading a single word.

The stamp doesn't make the desserts taste any better. But a plain bag sitting next to it looks like something that wasn't quite finished.

Websites carry a stamp like that too. It is the small icon in front of your site's name on a browser tab, and next to your site's name in Google search results. It is called a favicon. In this piece I'll explain what a favicon is, how it works, what Google requires before it shows one, which files to ask your web team for, and one mix-up that catches a lot of owners, our own team included: the logo shown beside a Google Ads text ad is a separate thing from your favicon.

Check your own site first, in under five minutes

Open your website on a computer and look at the tab at the very top of the browser. Is your shop's icon in front of the name? If you see a grey blank page or a small globe, the browser could not find an icon for your site.

Next, pick up your phone, search for your shop's name on Google, and look at your own result. There is a small circle next to the site name. Is your logo in it, or a generic icon that says nothing? Scroll through the other shops listed near you as well, and notice which result your eye stops on first.

Last one. If you use an iPhone, open your site in Safari, tap Share, and choose Add to Home Screen. Is the icon that appears a crisp version of your logo, or some other image you never chose?

If all three look right, well done. The rest of this piece will help you check the finer details. If any of them didn't, don't worry at all. This is usually a one-day fix, as long as you know which files to ask your web team for.

What a favicon is, and where it shows up

Favicon is short for "favorites icon". The name comes from the early days of browsers, when the icon appeared in the list of favorite sites, or bookmarks. Today it turns up in far more places: browser tabs, browsing history, bookmark lists, a phone's home screen when someone saves your site there, and Google search results next to your site's name.

Technically, a favicon is an image file stored on your website, plus one line in the header code of your pages that tells the browser where the icon lives. It looks roughly like <link rel="icon" href="/favicon.ico">. You don't need to write it yourself. Knowing the line exists is enough to ask your web team the right question.

Why such a tiny icon affects how people feel

Think about a customer who has a dozen tabs open while comparing several shops. The more tabs there are, the more each title gets squeezed, until all that is left is the icon. That icon is the only way they find their way back to you. If it's a blank page, your tab looks like one that never finished loading.

Search results work the same way. Every result sits in a row, in the same size of text. Only a handful of things actually differ between them, and the small circle beside the site name is one of them. A sharp logo reads as a real business. A generic icon, or a logo that has blurred into pixels, reads as a site someone left half done.

Nobody consciously thinks "this shop has no favicon." They just feel the other shop looks more ready.

That feeling ties straight into trust. Our article on what Thai buyers check before they dare transfer money to a shop they don't know shows how small signs that a shop looks after its own storefront feed into that decision without the buyer noticing. A favicon is one of those small signs.

What Google requires before it shows your favicon in Search

This section is based on Google Search Central's documentation on defining a favicon to show in search results, last updated on 28 August 2026. I read it point by point myself, because plenty of older articles online still describe an earlier set of rules.

Square, and big enough

Google says your favicon must be a square with a 1:1 aspect ratio and at least 8x8 pixels. In the same document, Google recommends a favicon larger than 48x48 pixels so it looks good on various surfaces. The 8-pixel minimum is the line you must clear. The size worth actually aiming for is the one Google recommends.

If your logo is a long horizontal lockup with the shop name spelled out, shrinking it into a tiny square makes it unreadable. What works is the symbol alone, or the first letter of your brand, so it truly becomes your shop's little stamp.

A file format Google supports

The formats Google lists are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. There is something worth noticing here. SVG is not on that list, even though many modern browsers can already use an SVG favicon on the tab. My recommendation is that a site using SVG should always keep an ICO or PNG version alongside it. I'll show you a well-known site that does exactly that in a moment.

Declared on the home page, and crawlable

The line that points to your icon has to sit in the header of your home page. Google says it supports four rel values: icon, shortcut icon, apple-touch-icon and apple-touch-icon-precomposed. On top of that, Googlebot must be able to crawl the home page, and Googlebot-Image must be able to crawl the favicon file. If your robots.txt accidentally blocks the folder where images live, Google simply cannot see your icon.

One favicon per hostname

Google counts favicons per hostname. If your main site is www.yourshop.com and your online store is shop.yourshop.com, each can have its own favicon. If the store lives at www.yourshop.com/shop instead, it shares the main site's favicon, because it is only a subdirectory of the same site. If subdomains versus the main domain still feel fuzzy, our article What is a Domain Name? walks through the parts of a domain name.

A stable address for the file

Google states plainly that the favicon URL must be stable, so don't change it frequently. After a change, you have to wait for Google to recrawl your home page, which the documentation says can take anywhere from several days to several weeks. To nudge it along, use the URL Inspection tool in Search Console to request indexing of your home page. I explain how to use that tool in our beginner's guide to Google Search Console.

Before leaving this section, I want to be straight with you. Google itself says a favicon isn't guaranteed to appear in search results even if every guideline is met, and Google won't show a favicon it deems inappropriate, replacing it with a default icon.

"It's a tiny icon. Customers don't even look at it."

That's true, and I fully agree. Nobody buys anything because a favicon is pretty. If you are weighing where your money and time should go first, clear product photos, prices and contact details matter far more than an icon.

Another question I hear a lot is whether a favicon helps you rank higher on Google. Google's favicon documentation is about eligibility to be displayed. It does not describe the favicon as a ranking factor, so I won't tell you that adding one will lift your rankings.

What it really does is smaller, but it happens every day. People who have visited you before can find your tab, spot your search result, and remember they have seen your shop before. The cost is a few image files and a few lines of code, done once and used for years. For half a day of work, I think that is worth it.

The logo beside a Google Ads ad is a separate thing from your favicon

Our own team got this wrong once, so let me go through it carefully.

If you run Google Ads Search campaigns, you may have noticed that some ads show a small round logo and a business name at the top, looking a lot like an organic result. Many owners assume that logo is pulled from the site's favicon. It isn't. Google's favicon documentation even carries a note saying it covers organic search results, and that logos on Google Ads results have their own specifications.

The logo on an ad comes from what Google Ads calls business information, which has two parts: a business name and a business logo. Both are set inside your Google Ads account, not in your website's code. Under Google Ads' business information requirements, the logo must be square (1x1), a PNG or JPG file, no more than 5120 KB, with a recommended size of 1200x1200 and a minimum of 128x128, and it must be compatible with both light and dark mode. Google renders the logo as a circle at a final size of 28x28 pixels. The business name can be at most 25 characters and must match either the domain name or the legal name verified through Advertiser verification.

There are account conditions too. Google lists Search spend in the last 28 days and completed Advertiser verification. Even with everything in place, Google says these assets are not guaranteed to serve. When they don't, the ad shows a placeholder globe icon next to the display URL.

In short, the favicon is managed on your website, and the ad logo is managed in your Google Ads account. You can start from the same master image, but each needs its own file size and its own upload. If you are just getting started with ads, our overview What is Google Ads? is a good place to begin.

A real story from our own ad account

In July 2026, when we restarted Search ads for TumWebSME, our team noticed our own ads were showing a globe instead of our logo. Our first instinct was to look at the website's favicon, which was the wrong place from the start. Tracing it properly, we learned the icon beside the ad comes from the business logo in the Google Ads account, and at the time our account was missing several pieces: no business name had been set, and Search spend had only just restarted a few days earlier.

There is another part of the story I want to share, because it taught us more than the favicon itself. The business logo file already in the account had a file name that looked like an old screenshot. Our team judged it by that name alone and concluded the logo was wrong and needed replacing. When we actually opened the file, it was the correct TW logo, comfortably above the minimum size. Not long after, our ads were showing the logo beside our domain as expected.

The lesson we wrote down as a team: open the file first, never judge it by its name.

If someone looks after your website or ads for you, the same applies. When anyone tells you an icon or logo is wrong, ask them to open the actual image and look at it together with you.

Why getting it right on day one pays off

A favicon added late costs more time than you'd expect. Google may take several days to several weeks to pick up a new icon. A site that launches with a complete favicon looks tidy in search results from the very first weeks customers start finding it. A site that adds one later spends those weeks showing a generic icon.

Something people often overlook is that the icon travels with your customers. Anyone who bookmarks your site or adds it to their home screen on day one keeps whatever icon existed that day on their device. If there was no deliberate icon yet, that is what stays on their phone.

And because Google asks for a stable favicon URL, choosing a good file name and location up front means that later, when you want to refresh the design, you only swap the image in the same place instead of moving it around.

The minimum set of files to ask your web team for

Start with one master file: a square version of your logo that uses only the symbol, with no long wording. An SVG is ideal, or a PNG with a transparent background at 512x512 pixels or larger. From that master, your web team can produce the set.

The first file is favicon.ico, placed at the root of your site. Almost every browser understands it, and ICO is on Google's supported list. Next comes a PNG for the tab, which many sites make at 32x32 pixels so it stays crisp on high-resolution screens.

The next important file is the apple-touch-icon at 180x180 pixels. According to MDN's reference on link rel values, Apple's iOS does not use rel="icon" when someone saves a web page to the home screen, and uses the non-standard apple-touch-icon instead. Without this file, the icon on an iPhone home screen won't be the logo you chose. The apple-touch-icon is also one of the rel values Google says it supports.

Finally, there are the icons in a web manifest: PNG files at 192x192 and 512x512 pixels that Android phones use when someone adds your site to the home screen. If your site doesn't have a manifest file yet, it's not a big deal. Get the first three in place first.

If you want SVG and dark mode support

The article Building an adaptive favicon on web.dev explains how to build an SVG favicon that changes color with the device's light or dark mode. The .ico file is linked first and the .svg after it, so browsers that support SVG use it while others still have the .ico. At the time that article was written, SVG favicons with media queries worked in Firefox and Chromium-based browsers.

If you'd rather not go that far, the simple approach I use is to give the icon a solid background, or a thin border around the symbol. A black logo on a transparent background disappears on a dark tab. With a background color of its own, it stays readable in both modes.

Real examples you can check yourself

I looked at the home page code of some sites Thai users know well. You can do the same: right-click the page, choose to view the page source, and search for the word icon.

GitHub uses an SVG file as its favicon and also declares a PNG as a fallback. That is exactly the pattern I described above. The SVG looks sharp in modern browsers, and PNG is a format on Google's list.

Wongnai keeps it simpler, with one favicon.ico and one apple-touch-icon. That alone covers browser tabs and the iPhone home screen.

TumWebSME's own site carries this set: favicon.ico, PNG files at 16x16 and 32x32, an apple-touch-icon at 180x180, and a site.webmanifest with 192x192 and 512x512 icons. Measured against Google's recommendation of a favicon larger than 48 pixels, our tab PNGs are smaller than that. The file in the set that is big enough is the apple-touch-icon, a rel value Google supports. I mention it so you can see that checking against the documentation line by line always turns up something to improve, even on a web team's own site.

A six-step plan for owners

1. Run the three quick checks above on your own site and note which ones didn't pass.

2. Prepare a square master logo using only the symbol, with a solid background or a border, at 512x512 pixels or larger, or as an SVG.

3. Send it to your web team and ask for favicon.ico, a PNG for the tab, a 180x180 apple-touch-icon and 192 and 512 manifest icons, declared in the header of the home page.

4. Ask the team to confirm robots.txt doesn't block the home page or the icon files, and agree to keep the same file names and locations from now on.

5. In Search Console, run URL Inspection on your home page and request indexing.

6. If you run Google Ads Search campaigns, set the business name and business logo separately in your ad account, and open the logo file with your own eyes before deciding whether it is right or wrong.

How to tell it's done

On the day your web team uploads the files, open your site in a private or incognito window and look at the tab. The new icon should appear straight away. If you still see the old one, the browser may be holding on to it, so try another device.

Then add the site to the home screen on an iPhone and an Android phone again. The icon should be the crisp logo you prepared.

For Google search results, be patient. Check once a week by searching your shop's name on your phone. Google's documentation says it can take several days to several weeks. If a long time passes and nothing changes, go back through the conditions one by one: a square image, a supported format, the declaration on the home page, and robots.txt.

For ads, look in the Assets section of your Google Ads account to see whether the business name and business logo have been approved, then search one of the keywords you advertise on to see whether the logo actually shows.

Back to the little stamp

That dessert shop's stamp is smaller than my thumb, yet it makes the bag unmistakably theirs every time, no matter whose bags it sits beside. A favicon does the same job on a browser tab and in a page of search results. Half a day of work and a handful of files, and it stamps your shop's name everywhere a customer comes across you.

For finer details, or if Google changes the rules later, treat Google's own documentation as the final word.

If you are planning a new website and want a team that takes care of details like this from launch day, you can see what each package covers on TumWebSME's package page, and then tell me about your shop. I'd be glad to hear it.

Follow TumWebSME

Follow us for insights on website development and online marketing:

• Facebook: TumWebSME Business Website Development

• Instagram: @tumwebsme

• TikTok: @tumwebsme

• YouTube: TumWebSME

Contact Us and Inquire About Services

• 088-983-9386 (Ploy)

• 099-856-3198 (Saennan)