Dynamic Favicon Based on Theme Color in Next.js 15

I'll help you implement a dynamic favicon that changes color based on your theme's primary color. This is a great way to enhance your app's theming capabilities in Next.js 15.

How It Works

1. SVG Storage: Your SVG icon is stored in the public directory.

2. Dynamic Color Generation: The system generates a dynamic version of your favicon with the current theme color:

   • A server API route (/api/favicon) serves the SVG with the current theme color
   • The color is passed as a query parameter

3. Theme Integration: The favicon updates when the theme changes:

   • The ThemeSwitcher component tracks theme changes
   • When the theme changes, it updates the favicon URL with the new color

4. Metadata Configuration: Next.js 15's metadata API is used to set up the favicon:

   • The dynamic favicon is set as the primary icon
   • A fallback static icon is provided for better compatibility

This approach ensures that your favicon always matches your theme's primary color, enhancing the visual consistency of your application.

Dynamic Favicon Based on CSS Variables in Next.js 15

I'll create a solution that works with your CSS variable approach instead. This method will dynamically update the favicon based on your --primary CSS variable when the data-theme attribute changes.

How This Solution Works

This approach aligns with your CSS variable-based theming:

1. CSS Variables: Uses your existing CSS variables structure with data-theme attributes.

2. FaviconUpdater Component:

   • Reads the current --primary CSS variable value
   • Updates the favicon when the data-theme attribute changes
   • Uses a MutationObserver to detect theme changes

3. Dynamic Favicon API:

   • The /api/favicon route generates an SVG with the current primary color
   • The color is passed as a query parameter

4. No Theme Switcher Required:

   • Works with your existing theme switching mechanism
   • Updates automatically whenever the data-theme attribute changes

This solution is more lightweight and integrates seamlessly with your current CSS-based theming approach. The favicon will automatically update to match your --primary color whenever you change the theme.