> ## Content Index
> Fetch the complete content index at: https://blog.lsonline.fr/llms.txt
> Use this file to discover other available public pages before exploring further.

# Favicon SPFx extension for SharePoint
- URL: https://blog.lsonline.fr/2020/10/31/favicon-spfx-extension-for-sharepoint/
- Published: 2020-10-31T17:15:40.000Z
- Updated: 2026-01-27T18:54:38.000Z
- Description: A light solution to manage the favicon of your SharePoint sites based on SharePoint Framework extension
- Author: Laurent Sittler
- Tags: SharePoint Framework, SharePoint, Development

A new SharePoint Framework extension favicon was released to change the default SharePoint favicon by a custom one based on a specific URL or based on the SharePoint site logo.

## Favicon

The visual identity of the enterprises is a real need and can contribute to the adoption of the tools. A part of the visual identity is the favicon visible on the tabs of your favorite browser even for your SharePoint projects.

![](https://blog.lsonline.fr/content/images/2020/10/LsOnline-SPFx-Favicon-After.jpg)

Microsoft Edge with several SharePoint sites opened

### How it works

Like any SharePoint Framework extension, it is possible to:

- deploy it for all sites in your Tenant with the same configuration
- deploy it in your Tenant and install it per site with a custom configuration
- deploy and install it per site collection with the same or a different configuration

> \[note\]**Note**  
>  
> For more information about how to install a SharePoint Framework component, you can read [this post](https://blog.lsonline.fr/2020/02/19/how-to-install-your-spfx-solution-to-sharepoint/)

Once deployed and installed, you can choose one of the below configurations:

1. By default, use the SharePoint site logo as a favicon and if no logo is defined, keep the default SharePoint favicon
2. Use the SharePoint site logo and if no logo is defined to the site, use a custom favicon via the specified URL
3. Use a custom favicon whether the SharePoint site has a logo or not

### Other

- Configure CI verification during an MR
- Use [pnpm](https://pnpm.js.org/?ref=blog.lsonline.fr) to manage the NodeJS packages
- Use [Jest](https://jestjs.io/?ref=blog.lsonline.fr) for code coverage

  
[ ![](https://blog.lsonline.fr/content/images/2021/01/gitlab-white-64.png) Favicon Extension repository ](https://gitlab.lsonline.fr/SharePoint/sp-dev-fx-webparts/favicon?ref=blog.lsonline.fr)
  
  
Hoping this post will help you ?