diff --git a/apps/web/src/components/ProjectFavicon.tsx b/apps/web/src/components/ProjectFavicon.tsx
index f7603a36e9a..bc3e8ee832f 100644
--- a/apps/web/src/components/ProjectFavicon.tsx
+++ b/apps/web/src/components/ProjectFavicon.tsx
@@ -1,6 +1,7 @@
 import type { EnvironmentId } from "@t3tools/contracts";
 import { isProjectFaviconFallbackUrl } from "@t3tools/shared/projectFavicon";
 import { FolderIcon } from "lucide-react";
+import type { ComponentType } from "react";
 import { useState } from "react";
 import { useAssetUrl } from "../assets/assetUrls";
 
@@ -10,29 +11,46 @@ export function ProjectFavicon(input: {
   environmentId: EnvironmentId;
   cwd: string;
   className?: string | undefined;
+  fallbackIcon?: ComponentType<{ className?: string }>;
 }) {
   const src = useAssetUrl(input.environmentId, {
     _tag: "project-favicon",
     cwd: input.cwd,
   });
+  const FallbackIcon = input.fallbackIcon ?? FolderIcon;
 
   if (!src || isProjectFaviconFallbackUrl(src)) {
-    return <ProjectFaviconFallback className={input.className} />;
+    return <ProjectFaviconFallback className={input.className} icon={FallbackIcon} />;
   }
 
-  return <ProjectFaviconImage key={src} src={src} className={input.className} />;
+  return (
+    <ProjectFaviconImage
+      key={src}
+      src={src}
+      className={input.className}
+      fallbackIcon={FallbackIcon}
+    />
+  );
 }
 
-function ProjectFaviconFallback({ className }: { readonly className?: string | undefined }) {
-  return <FolderIcon className={`size-3.5 shrink-0 text-muted-foreground/50 ${className ?? ""}`} />;
+function ProjectFaviconFallback({
+  className,
+  icon: Icon,
+}: {
+  readonly className?: string | undefined;
+  readonly icon: ComponentType<{ className?: string }>;
+}) {
+  return <Icon className={`size-3.5 shrink-0 text-muted-foreground/50 ${className ?? ""}`} />;
 }
 
 function ProjectFaviconImage({
   src,
   className,
+  fallbackIcon: FallbackIcon,
 }: {
   readonly src: string;
   readonly className?: string | undefined;
+  readonly fallbackIcon: ComponentType<{ className?: string }>;
 }) {
   const [status, setStatus] = useState<"loading" | "loaded" | "error">(() =>
     loadedProjectFaviconSrcs.has(src) ? "loaded" : "loading",
@@ -40,7 +58,9 @@ function ProjectFaviconImage({
 
   return (
     <>
-      {status !== "loaded" ? <ProjectFaviconFallback className={className} /> : null}
+      {status !== "loaded" ? (
+        <ProjectFaviconFallback className={className} icon={FallbackIcon} />
+      ) : null}
       <img
         src={src}
         alt=""
diff --git a/apps/web/src/components/SidebarV2.tsx b/apps/web/src/components/SidebarV2.tsx
index a62e09a3b8e..f3f03dc8b61 100644
--- a/apps/web/src/components/SidebarV2.tsx
+++ b/apps/web/src/components/SidebarV2.tsx
@@ -14,6 +14,7 @@ import {
   CircleDashedIcon,
   CloudIcon,
   FolderPlusIcon,
+  MessageSquareIcon,
   PlusIcon,
   SearchIcon,
   SquarePenIcon,
@@ -426,6 +427,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
               environmentId={thread.environmentId}
               cwd={props.projectCwd ?? ""}
               className="size-3.5"
+              fallbackIcon={MessageSquareIcon}
             />
           </span>
           {title}