So what is a favicon?

Copilot explains that a favicon (short for favourite icon) is a small icon associated with a website or web page. It typically appears:

• In the browser tab, next to the page title.
• In bookmarks or favourites lists.
• In address bars (depending on the browser).
• Sometimes in search results or shortcuts on mobile devices.

They’re those natty little icons that appear in your browser tab and favourites toolbar and you see them everywhere.

But we can’t easily set a custom favicon in SharePoint. Microsoft are most insistent that we use the standard SharePoint one and don’t provide use with an easy way to change this ☹

Why bother with custom favicons

This is not an exhaustive list, but here is my 10c worth as to why we might want a custom favicon:

• Branding & Recognition: A favicon reinforces your brand or corporate identity. They provide a visual cue that helps users quickly recognise your site among multiple open tabs or bookmarks.
• Improved User Experience: When users have many tabs open, a favicon makes it easier to identify your site without reading the tab title. Favicons also appears in bookmarks and shortcuts, making navigation more intuitive.
• Professional Appearance: Sites without a favicon often look incomplete or less polished. A favicon signals attention to detail and professionalism.
• Trust & Credibility: Users tend to trust websites that look well-designed. A favicon contributes to that perception.
• SEO & Engagement: While favicons don’t directly affect search rankings, they improve click-through rates from bookmarks and mobile shortcuts, indirectly supporting user adoption.

(My) Requirements for SharePoint Favicons

Having established that favicons are a good thing, it is a shame that Microsoft don’t natively support this as configuration option. Afterall, they do allow us to set custom site logos.

Maybe in the future (if anyone from Microsoft ever reads this post) they will do just that, but for now, if we want this capability, we need to rely on a 3rd party solution (or build your own).

But I have built one for you, called K-Favicon and using it is absolutely free – that’s right, no adds, no licensing, no gimmicks and no registration is required, and in a matter of minutes you can brand you sites with custom favicons galore!

But just before we get to that, I’d like to point out a few requirements that we might have, or at least these are requirements which have fallen from my customer engagements:

• Site Favicons: I want to have the option to set a separate and unique favicon for each SharePoint site.
• Hub Favicons: In cases where I have a collection of sites associated with a SharePoint hub site, I want the option to set the favicon at the hub site and get all associated sites to use that favicon. If a site gets reassigned to a different hub it should automatically pick up the new hub favicon.
• Tenancy Wide Favicon: I want the option of setting a default custom favicon that will be used for all sites in the tenancy, unless a favicon at the hub or site is found.
• Sites trump Hubs trump Tenancy trump Microsoft: I want it so that:
  • If a site favicon is found, it should be used.
  • When found, a hub favicon should be used for all sites in that hub, unless a site favicon is found.
  • When found, as tenancy wide icon will be used only when no site or hub favicon can be found.
  • If no favicon is found at the site, hub or tenancy level, then (and only then) should the default Microsoft one be used.

Introducing K-Favicon

To deliver custom favicons for our customers, we needed to build a custom solution using the SharePoint Framework (SPFx) and the approach I took was to build K-Favicon as an Application Customizer. As Microsoft describe them here:

That sound like just what we need. Actually, the code used to build K-Favicon is almost trivial:

The magic comes in the call to the FaviconUrl method in the custom FaviconUtilities class.

I won’t do a code walk here but this is an asynchronous method which fires off up to 3 requests for a favicon graphic file which may (or may not) be located in the root of the Site Assets library for the site, the associated hub site (if applicable) and the root site of the tenancy (the site with just your domain name and no /sites or /teams managed path).

These are quick and lightweight pings, simply to establish if the root folder of the Site Assets library contains a file explicitly named Favicon.png. We don’t need to pull down the graphic file we; just need to know if one exists.

In case we find multiple favicon files, we use the one according to the trumping logic described previously.

Assuming we find a favicon, we simply append a new HTMLLinkElement as new element to the head of the DOM and that’s it. Amazingly simple and effective.

Solution Download and Deployment

To try it out, head over to the Kaboodle Software web site and download the solution package from the link on the product page at https://kaboodle.software/Solutions/K-Gifts/K-Favicon

There is also detailed product support documentation which can be accessed from: https://kaboodlecustomers.blob.core.windows.net/kgiftsfavicon/k-gifts-favicon.pdf

You then just need to upload the solution package to your App Catalog and deploy it.

K-Favicon has the option to skip-feature deployment so that it can be automatically deployed to every site in your tenancy without the need for site owners to explicitly deploy it on each site, but I totally understand if you didn’t want to do that from the outset.

Remember that you will need to park suitable graphic files in the root of the appropriate Site Assets libraries and they must all be named Favicon.png.

The favicon files should of course be appropriately sized images. You wouldn’t want to use anything 1000px square – a 32px square icon will do just fine. The favicon files don’t strictly need to be in the PNG format. If you have a GIF, JPEG or ICO file you can just rename them with a bogus .png filename extension and it will work.

If K-Favicon works for you, all we ask is that you promote us on your social and network channels. If it doesn’t work for you, please reach out and give us a chance to put things right, before dissing us!