How to Set a Different Favicon for Each Page in Webflow with Finsweet

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to set a different favicon on every page of your Webflow project with Finsweet Attributes Favicon.

Understanding the native limitation

Webflow lets you set just one favicon for the entire project (Project Settings > General). Natively, you can't set a different favicon for each page. Finsweet Favicon lets you override that favicon page by page with a simple custom attribute.

1. Add the script in the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-favicon@1/favicon.js" defer>script>

2. Upload your favicon to Webflow Assets

Upload the page's favicon image to your Webflow Assets (a 32x32 or 64x64 PNG is recommended, or SVG). Copy the asset URL.

3. Add the attributes to any element

On any element on the page — a Div, an invisible Text Block, or even the Body — add:

• fs-favicon-element="icon"
• fs-favicon-href="https://cdn.prod.website-files.com/votre-favicon.png"
• fs-favicon-type="image/png"

Finsweet dynamically replaces the project favicon with the page's favicon on load.

Conclusion

Page-specific favicons let you fine-tune the experience in browser tabs. Use cases:

• Multi-brand site with a favicon for each brand
• App with a different favicon depending on the state (notification, alert)
• Site with distinct sections that are visually differentiated