Comment définir un favicon différent par page dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment définir un favicon différent sur chaque page de votre projet Webflow avec Finsweet Attributes Favicon.

Comprendre la limitation native

Webflow permet de définir un seul favicon au niveau du projet entier (Project Settings > General). Il est impossible nativement de définir un favicon différent par page. Finsweet Favicon permet de surcharger ce favicon page par page via un simple custom attribute.

1. Ajoutez le script dans le head

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

2. Uploadez votre favicon dans Webflow Assets

Uploadez l'image favicon de la page dans vos Webflow Assets (image PNG 32x32 ou 64x64 recommandée, ou SVG). Copiez l'URL de l'asset.

3. Ajoutez les attributs sur n'importe quel élément

Sur n'importe quel élément de la page (un Div, un Text Block invisible, ou même le Body), ajoutez :

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

Finsweet remplace dynamiquement le favicon du projet par celui de la page au chargement.

Conclusion

Les favicons par page permettent une personnalisation fine de l'expérience dans les onglets. Cas d'usage :

• Site multi-marques avec favicon par marque
• Application avec favicon différent selon l'état (notification, alerte)
• Site avec sections distinctes visuellement différenciées