Favicon light and dark in Page

This tool allows you to dynamically change your website's favicon based on user preferences or specific conditions. Support both light and dark mode favicons that automatically switch based on the user's system preferences. Perfect for branding consistency, seasonal changes, or providing visual feedback. The favicon updates instantly without page reload, enhancing your site's professional appearance and user experience.

Share this feature

Implement it easier

Demo Website

Get the Clonable

Add the script

Add this script in page settings > Custom code > Before the closing </body> tag

<!-- BeBranded Contents -->
<script async src="https://cdn.jsdelivr.net/npm/@bebranded/bb-contents@1/bb-contents.js"></script>

Simple favicon

bb-favicon attribute

bb-favicon = "https://www.mysite.com/favicon.ico"

Add the bb-favicon attribute to any element on the page to change the favicon.

Add this attribute:

Name

bb-favicon

Value

https://www.mysite.com/favicon.ico

NOTE

The URL must point to a valid image (ICO, PNG, SVG). The favicon will be changed as soon as the page loads.

Optional

Dark/light mode

Adaptive favicon

bb-favicon and bb-favicon-dark attributes

bb-favicon-dark = "https://www.mysite.com/favicon-dark.ico"

Use bb-favicon for light mode and bb-favicon-dark for dark mode. The favicon will automatically change according to user preferences.

Add this attribute:

Name

bb-favicon-dark

Value

https://www.mysite.com/favicon-dark.ico

NOTE

The module automatically detects the browser's dark/light mode preferences and changes the favicon accordingly.

Still need help?

Try other Contents

All Contents

Add the script

Simple favicon

Simple favicon

Dark/light mode

Adaptive favicon

Try other Contents

Multilingual FAQ Schema Generator

Multilingual Breadcrumb Schema Generator

Youtube Grid on Webflow