Use dynamic favicon in root sidebar

components/dashboard/sidebar.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
-import Image from "next/image";
 import type { LucideIcon } from "lucide-react";
 
 import { Separator } from "@/components/ui/separator";
@@ -16,11 +15,12 @@ type DashboardSidebarItem = {
 
 type DashboardSidebarProps = {
   items: DashboardSidebarItem[];
+  iconSrc?: string;
   top?: ReactNode;
   footer?: ReactNode;
 };
 
-export function DashboardSidebar({ items, top, footer }: DashboardSidebarProps) {
+export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSidebarProps) {
   function renderItem(item: DashboardSidebarItem, nested = false) {
     const Icon = item.icon;
 
@@ -48,7 +48,12 @@ export function DashboardSidebar({ items, top, footer }: DashboardSidebarProps)
     <div className="flex h-full flex-col bg-sidebar/40">
       <div className="flex items-center gap-3 px-4 py-5">
         <div className="overflow-hidden rounded-xl border border-border/70 bg-background shadow-sm">
-          <Image src="/favicon.ico" alt="Mohs Admin" width={36} height={36} className="h-9 w-9" />
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={iconSrc || "/favicon.ico"}
+            alt="Mohs Admin"
+            className="h-9 w-9 object-cover"
+          />
         </div>
         <div className="min-w-0">
           <p className="truncate text-sm font-semibold text-foreground">Mohs Admin</p>