Comment définir un favicon différent par page dans Webflow avec Finsweet ?
Apprenez à définir un favicon différent sur chaque page de votre projet Webflow avec Finsweet Attributes Favicon.
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.
| Attribut | Élément | Valeur |
|---|---|---|
| fs-favicon-element | N'importe quel élément sur la page | icon |
| fs-favicon-href | Même élément | URL de l'image favicon (.png, .ico, .svg) |
| fs-favicon-type | Même élément | Type MIME (ex: image/png) |
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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
