Favicon

Written by Cobus van der Westhuizen, reviewed by Wynand van der Westhuizen, fact-checked by Lenata Oosthuizen. Last reviewed July 2026. Editorial policy.

What Is a Favicon?

The word favicon is a portmanteau of "favourite icon", originating from Internet Explorer's feature of saving a small icon alongside bookmarked pages. Today, favicons appear in browser tabs, the address bar, bookmark managers, browser history lists, app shortcuts, and prominently in Google Search results on mobile devices, where they appear as small circular or square images beside the URL and page title of each organic result.

A favicon is typically a simplified, minimal version of a brand's logo or a single symbolic element from the brand identity. Because it renders at very small sizes, ranging from 16x16 pixels to 48x48 pixels in most browser contexts, detail is lost at scale. The most effective favicons use a single recognisable symbol, initial letter, or icon rather than attempting to reproduce a full wordmark or complex logo. The icon must read clearly against both light and dark browser themes.

Modern favicon implementation goes beyond a single ICO file. The recommended set for full coverage includes an SVG favicon for modern browsers that scales to any resolution without quality loss, a 32x32 or 48x48 pixel ICO file for legacy browsers and Windows taskbar pinning, and a 180x180 pixel PNG apple-touch-icon for iOS home screen bookmarks and Safari reading lists. A web app manifest file (manifest.json) references additional sizes for Progressive Web App (PWA) icons and Android home screen shortcuts. Each of these is referenced in the HTML head, and missing any one of them can leave a browser showing a blank grey square where your favicon should appear.

Browsers cache favicons aggressively. When updating a favicon, append a version query string to the link href or increment the file version to bust the cache and ensure visitors see the new icon promptly. Without cache busting, the old favicon may persist for days or weeks in returning visitors' browsers.

Favicon In Practice

A Pretoria-based insurance brokerage rebranded their business and updated their full website but overlooked the favicon. For months after launch, visitors saw the old company's icon in browser tabs, while Google Search showed the previous logo beside their listing in mobile results. The mismatch created a subtle but real credibility gap, particularly for visitors arriving from mobile searches who saw different branding in the results versus the open tab. Updating the favicon required creating a simplified single-letter monogram from the new brand colour system, generating the full set of sizes, uploading them, and adding the correct link elements to the HTML head.

For South African businesses using WordPress, favicon management is handled under Appearance, Customise, Site Identity, where you can upload a Site Icon. The recommended upload is a 512x512 pixel PNG or SVG that WordPress uses to generate all the required sizes automatically. For custom-built sites, tools such as RealFaviconGenerator.net produce the complete set of files and the exact HTML snippet to paste into the head of your page, covering all browsers including older versions of Internet Explorer and Android Chrome. This small detail is a hallmark of professional web design and is one of the first things a client or reviewer notices when auditing a site's polish.

What a favicon is

A favicon (favourite icon) is the small icon associated with a website that appears in various places in the browser and beyond, such as in the browser tab, next to the page title, in bookmarks, in the browser history, and sometimes in search results, representing the site visually with a tiny, recognisable image. Typically a small square image (often derived from the brand's logo or a simplified brand mark), the favicon is what lets users visually identify a site at a glance, for example, spotting the right tab among many open tabs, or recognising a bookmarked site by its icon. Favicons are a standard element of a professional, complete website: a site without a favicon shows a generic, blank icon in these places, which looks unfinished and makes the site harder to identify, whereas a proper favicon reinforces brand recognition and gives a polished, complete impression. The favicon is set up by providing the icon image and referencing it in the site's HTML (and via related files and configurations for different devices and contexts, since modern sites often provide favicons in multiple sizes and formats for browsers, mobile devices and bookmarks). Notably, Google may display a site's favicon alongside its listings in mobile search results, giving the favicon a small role in how the site appears in search. Understanding favicons matters because they are a small but standard part of a complete, professional website that supports brand recognition and a polished appearance across browsers and, increasingly, in search results, so knowing what a favicon is, and ensuring a site has a proper one, is a basic element of building a finished, recognisable website, even though the favicon is a minor detail rather than a major functional feature.

Favicon size, setup and SEO

Setting up a favicon well involves providing the icon in appropriate sizes and formats and referencing it correctly, and understanding its minor but real role in appearance and search. On size and format: favicons are small square images, and because they appear in different contexts and on different devices (browser tabs, bookmarks, mobile home screens, search results), modern practice is to provide the favicon in several sizes to suit these uses rather than a single fixed size; a small base size (historically 16 by 16 pixels for the classic browser-tab favicon) is the smallest, but sites typically also provide larger versions (such as 32 by 32, and larger sizes like 180 by 180 or 192 by 192 pixels for mobile and higher-resolution contexts), so the practical guidance is to supply the favicon in multiple sizes (commonly through a set of icon files and a web app manifest) to display crisply across the various places it appears, rather than a single size. The image should be simple and recognisable, since it is displayed very small, so a clear, simplified brand mark works better than a detailed image. Setting it up involves providing the icon files and referencing them in the site's HTML head (and manifest), which website platforms and tools often help generate. On SEO: the favicon is not a ranking factor and does not directly affect SEO, having or lacking a favicon does not change rankings. However, it has a minor role in how a site appears in search: Google may show a site's favicon next to its listing in mobile search results, so a proper favicon contributes to a polished, recognisable appearance in mobile search (and its absence shows a generic icon), which can subtly affect how the listing looks and, marginally, its appeal, though this is a small presentational matter rather than a ranking effect. So the favicon's relevance to search is presentational (appearing in mobile results) rather than a ranking factor. For a South African business, the practical guidance is to ensure its website has a proper favicon, a clear, simple, brand-recognisable icon provided in the appropriate sizes and formats and correctly referenced, so the site looks polished and recognisable across browser tabs, bookmarks, mobile devices and mobile search results. While the favicon is a minor detail with no direct SEO ranking effect, having a proper one is a basic part of a complete, professional website and contributes to brand recognition and a polished appearance, including in mobile search where Google may display it, so setting up a good favicon is a small but worthwhile finishing touch for any professional site.

FAQ