You can customize the Chainlit application with your own logo and favicon.

Assets such as favicons and logos are cached by default by your browser. You might have to clear your browser cache to see the changes.

Chainlit Application offers support for both dark and light modes. To accommodate this, prepare two versions of your logo, named logo_dark.png and logo_light.png. Place these logos in a /public folder next to your application. Once you restart the application, your custom logos should be displayed accordingly.

Custom Logo Example

Practical example of how to use custom logos in your Chainlit application.

​
Use your Favicon

To further enhance branding, you can also update the application’s favicon. Place an image file named favicon in the public folder next to your application. After restarting the application, the new favicon will take effect.

​
Customize Login Page Background image

If authentication is enabled, a background image (defaulting to the Chainlit logo) will be displayed on the login page. You can customize it by editing the following fields of your .chainlit/config.toml file.

config.toml
[UI]
# Custom login page image, relative to public directory or external URL
login_page_image = "/public/custom-background.jpg"

# Custom login page image filter (Tailwind internal filters, no dark/light variants)
# login_page_image_filter = "brightness-50 grayscale"
# login_page_image_dark_filter = "contrast-200 blur-sm"

Was this page helpful?

Suggest editsRaise issue