Now taking new projects, limited availability each month.
THOUGHTS / BEGINNERS GUIDE 31 Mar 2025 6 MIN READ

What Is a Favicon and Does Your Website Need One?

Look at the tabs at the top of your browser right now. Each one probably has a tiny icon next to the page name — a miniature logo, a letter, or a small symbol. That icon is called a favicon. It is a small detail, but missing one makes your website look unfinished — and it affects more than just how your tab looks.

A favicon is the small icon that appears in your browser tab next to your page title, and also in bookmarks, search results on some browsers, and when someone saves your site to their phone's home screen. Without one, your tab shows a generic blank icon that signals an unfinished or amateur website. Every business website should have a favicon — and creating one is straightforward once you know what is needed.

The word "favicon" comes from "favourite icon" — it was originally designed to appear when someone bookmarked a website in the early days of Internet Explorer. Since then, browsers have expanded where favicons appear, and they have become one of the small but visible signals that distinguishes a professionally built website from something thrown together quickly.

If your website does not have a favicon, visitors see a small grey square or a generic browser icon in their tab. It is a minor thing in isolation, but combined with other small signals — slow loading, stock photography, generic fonts — it contributes to an impression of a business that has not invested much thought in its online presence.

Where Favicons Appear

People think of favicons as just the browser tab icon, but they appear in more places than that:

  • Browser tabs. The most visible placement. When someone has multiple tabs open, your favicon helps them find your page quickly without reading each tab title.
  • Bookmarks. When someone saves your website to their bookmarks or favourites, the favicon appears next to the bookmark name. A recognisable icon makes your bookmark easy to spot.
  • Browser history. Your favicon appears next to your page title in the browser's history list.
  • Home screen shortcuts on phones. When a visitor uses "Add to Home Screen" on their phone, the favicon becomes the icon that appears on their phone's home screen alongside their apps. A well-designed favicon at the right size looks like a proper app icon.
  • Search results. Google now shows favicons in mobile search results next to each result's web address. A recognisable favicon reinforces your brand at the point where someone is deciding whether to click your result.

What Makes a Good Favicon

The main challenge with favicons is size. They are displayed at very small dimensions — typically 16 by 16 pixels or 32 by 32 pixels. At that scale, most logos become unreadable. A detailed illustration, a business name in full, or a complex graphic will all blur into an unrecognisable smear.

What works well is a simplified version of your brand mark — often just an initial, a symbol, or an icon that represents your business. If your logo is your business name written out, the common approach is to take just the first letter or letters and turn that into the favicon. It should be recognisable as yours without containing more detail than tiny dimensions can support.

A favicon works when you can recognise it in a row of twenty other browser tabs. That requires simplicity — one letter, one symbol, or a bold minimal shape.

The file itself is usually a square image saved as either an ICO file (the traditional format) or as an SVG file (a modern, infinitely scalable format that many browsers now prefer). For best compatibility, professional websites often include both.

How to Check Whether Your Site Has a Favicon

Open your website in a browser and look at the tab. If you see your logo or a letter representing your brand, you have a favicon. If you see a small grey square, a broken image icon, or just the browser's generic page icon, you do not.

You can also check in your browser's address bar — many browsers show the favicon there too. And if you search for your website name on Google from a phone, you can see whether a favicon appears in the search results next to your URL.

How to Get a Favicon for Your Website

If your website was built on a platform like Wix, Squarespace, or WordPress, adding a favicon is usually found in the site settings under something like "Branding" or "Identity". You upload a square image — ideally your logo or a simplified version of it — and the platform handles the rest.

If your website is hand-coded, a favicon is added via a line of HTML in the head of each page:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

The file itself needs to be created. If you have a logo, a graphic designer or a tool like Figma can create a simplified version sized appropriately. There are also free online tools that will convert an image into the correct formats — searching for "favicon generator" will find several. The result should be a clean square image that reads clearly at very small sizes.

Does a Favicon Affect Google Rankings?

Not directly. Google does not use the presence or absence of a favicon as a ranking signal. However, having a favicon does affect how your site appears in Google search results on mobile — a missing or broken favicon shows a generic grey icon next to your URL, while a well-designed one shows your brand mark. Given that search results are a first impression, and first impressions affect click-through rates, it is reasonable to treat a favicon as one of the small things that contributes to a professional result.

More practically, a favicon is one of those details that is immediately visible to anyone who looks at your website. It is not a big deal on its own — but getting all the small details right signals a level of care and professionalism that matters to potential customers. If you are currently relying on a Facebook page as your online presence, having a website instead of a Facebook page puts those details — including the favicon — firmly under your own control.

Frequently asked

What size should a favicon be?
Traditional favicons are 16×16 or 32×32 pixels saved as ICO files. Modern best practice is to also include an SVG version, which scales perfectly to any size because it is vector-based. If you are creating one image, a 512×512 pixel PNG works well as a source file that can be scaled down or converted to the formats you need. Keep the design simple — at 16×16 pixels, fine details disappear entirely.
My website builder says it has added a favicon but I cannot see it. Why?
Favicons are often cached aggressively by browsers — meaning once a browser has loaded (or not found) a favicon, it can remember that result for a long time. If you recently added a favicon and it is not showing, try opening your website in a private or incognito browser window. If that does not work, clearing your browser cache should force it to load the new one.
Can I use my full logo as a favicon?
It depends on the logo. A simple, bold logo that is already square or nearly square may translate well. A horizontal logo with text will not — the text becomes unreadable at small sizes, and the proportions will require cropping that changes the design. For most businesses with a text-based or wide logo, the practical approach is to create a simplified favicon version — often just an initial or brand mark — rather than trying to squeeze the full logo into a tiny square.
Does GitFoundry add a favicon when building a website?
Yes. Every site I build includes a proper favicon — typically an SVG for modern browsers, with a fallback for older ones. I work with whatever brand assets you have, or we design something appropriate if you are starting from scratch. It is one of many small details that are easy to overlook but matter for a finished, professional result.

We use Google Analytics to understand how visitors use this site. No personal data is sold. Privacy policy.