refac: profile_image_url optimization

backend/open_webui/main.py

@@ -1454,6 +1454,10 @@ async def get_models(
         if "pipeline" in model and model["pipeline"].get("type", None) == "filter":
             continue
 
+        # Remove profile image URL to reduce payload size
+        if model.get("info", {}).get("meta", {}).get("profile_image_url"):
+            model["info"]["meta"].pop("profile_image_url", None)
+
         try:
             model_tags = [
                 tag.get("name")

backend/open_webui/routers/models.py

@@ -253,6 +253,7 @@ async def get_model_profile_image(id: str, user=Depends(get_verified_user)):
                     )
                 except Exception as e:
                     pass
+
         return FileResponse(f"{STATIC_DIR}/favicon.png")
     else:
         return FileResponse(f"{STATIC_DIR}/favicon.png")

src/lib/components/admin/Evaluations/Leaderboard.svelte

@@ -10,7 +10,7 @@
 
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -515,7 +515,7 @@
 							<div class="flex items-center gap-2">
 								<div class="shrink-0">
 									<img
-										src={model?.info?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/favicon.png`}
+										src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}`}
 										alt={model.name}
 										class="size-5 rounded-full object-cover shrink-0"
 									/>

src/lib/components/admin/Settings/Evaluations/Model.svelte

@@ -5,6 +5,7 @@
 
 	import Cog6 from '$lib/components/icons/Cog6.svelte';
 	import ArenaModelModal from './ArenaModelModal.svelte';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	export let model;
 
 	let showModel = false;
@@ -27,7 +28,7 @@
 		<div class="flex flex-col flex-1">
 			<div class="flex gap-2.5 items-center">
 				<img
-					src={model.meta.profile_image_url}
+					src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}`}
 					alt={model.name}
 					class="size-8 rounded-full object-cover shrink-0"
 				/>

src/lib/components/admin/Settings/Models.svelte

@@ -37,7 +37,7 @@
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import EyeSlash from '$lib/components/icons/EyeSlash.svelte';
 	import Eye from '$lib/components/icons/Eye.svelte';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	let shiftKey = false;
 
@@ -334,7 +334,7 @@
 										: 'opacity-50 dark:opacity-50'} "
 								>
 									<img
-										src={model?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+										src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}`}
 										alt="modelfile profile"
 										class=" rounded-full w-full h-auto object-cover"
 									/>

src/lib/components/admin/Users/UserList.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { onMount, getContext } from 'svelte';
@@ -362,11 +362,7 @@
 							<div class="flex items-center">
 								<img
 									class="rounded-full w-6 h-6 object-cover mr-2.5 flex-shrink-0"
-									src={user?.profile_image_url?.startsWith(WEBUI_BASE_URL) ||
-									user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
-									user.profile_image_url.startsWith('data:')
-										? user.profile_image_url
-										: `${WEBUI_BASE_URL}/user.png`}
+									src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
 									alt="user"
 								/>
 

src/lib/components/channel/MessageInput/MentionList.svelte

@@ -171,8 +171,7 @@
 							</div>
 						{:else if item.type === 'model'}
 							<img
-								src={item?.data?.info?.meta?.profile_image_url ??
-									`${WEBUI_BASE_URL}/static/favicon.png`}
+								src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${item.id}&lang=${$i18n.language}`}
 								alt={item?.data?.name ?? item.id}
 								class="rounded-full size-5 items-center mr-2"
 							/>

src/lib/components/channel/Messages/Message.svelte

@@ -185,8 +185,7 @@
 						/>
 					{:else}
 						<img
-							src={message.reply_to_message.user?.profile_image_url ??
-								`${WEBUI_BASE_URL}/static/favicon.png`}
+							src={`${WEBUI_API_BASE_URL}/users/${message.reply_to_message.user?.id}/profile/image`}
 							alt={message.reply_to_message.user?.name ?? $i18n.t('Unknown User')}
 							class="size-4 ml-0.5 rounded-full object-cover"
 						/>
@@ -220,7 +219,7 @@
 					{:else}
 						<ProfilePreview user={message.user}>
 							<ProfileImage
-								src={message.user?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+								src={`${WEBUI_API_BASE_URL}/users/${message.user.id}/profile/image`}
 								className={'size-8 ml-0.5'}
 							/>
 						</ProfilePreview>

src/lib/components/channel/Messages/Message/UserStatus.svelte

@@ -2,7 +2,7 @@
 	import { getContext, onMount } from 'svelte';
 
 	const i18n = getContext('i18n');
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	export let user = null;
 </script>
@@ -11,8 +11,7 @@
 	<div class=" flex gap-3.5 w-full py-3 px-3 items-center">
 		<div class=" items-center flex shrink-0">
 			<img
-				crossorigin="anonymous"
-				src={user?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+				src={`${WEBUI_API_BASE_URL}/users/${user?.id}/profile/image`}
 				class=" size-12 object-cover rounded-xl"
 				alt="profile"
 			/>

src/lib/components/channel/Navbar.svelte

@@ -11,6 +11,7 @@
 	import PencilSquare from '../icons/PencilSquare.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import Sidebar from '../icons/Sidebar.svelte';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -80,7 +81,7 @@
 						>
 							<div class=" self-center">
 								<img
-									src={$user?.profile_image_url}
+									src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
 									class="size-6 object-cover rounded-full"
 									alt="User profile"
 									draggable="false"

src/lib/components/chat/ChatPlaceholder.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { marked } from 'marked';
 
 	import { config, user, models as _models, temporaryChatEnabled } from '$lib/stores';
@@ -53,11 +53,7 @@
 							placement="right"
 						>
 							<img
-								crossorigin="anonymous"
-								src={model?.info?.meta?.profile_image_url ??
-									($i18n.language === 'dg-DG'
-										? `${WEBUI_BASE_URL}/doge.png`
-										: `${WEBUI_BASE_URL}/static/favicon.png`)}
+								src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 								class=" size-[2.7rem] rounded-full border-[1px] border-gray-100 dark:border-none"
 								alt="logo"
 								draggable="false"

src/lib/components/chat/MessageInput.svelte

@@ -1069,14 +1069,9 @@
 									<div class="flex items-center justify-between w-full">
 										<div class="pl-[1px] flex items-center gap-2 text-sm dark:text-gray-500">
 											<img
-												crossorigin="anonymous"
 												alt="model profile"
 												class="size-3.5 max-w-[28px] object-cover rounded-full"
-												src={$models.find((model) => model.id === atSelectedModel.id)?.info?.meta
-													?.profile_image_url ??
-													($i18n.language === 'dg-DG'
-														? `${WEBUI_BASE_URL}/doge.png`
-														: `${WEBUI_BASE_URL}/static/favicon.png`)}
+												src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${$models.find((model) => model.id === atSelectedModel.id).id}&lang=${$i18n.language}`}
 											/>
 											<div class="translate-y-[0.5px]">
 												<span class="">{atSelectedModel.name}</span>

src/lib/components/chat/MessageInput/CallOverlay.svelte

@@ -13,6 +13,7 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import VideoInputMenu from './CallOverlay/VideoInputMenu.svelte';
 	import { KokoroWorker } from '$lib/workers/KokoroWorker';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -759,14 +760,8 @@
 								? ' size-16'
 								: rmsLevel * 100 > 1
 									? 'size-14'
-									: 'size-12'}  transition-all rounded-full {(model?.info?.meta
-							?.profile_image_url ?? '/static/favicon.png') !== '/static/favicon.png'
-							? ' bg-cover bg-center bg-no-repeat'
-							: 'bg-black dark:bg-white'}  bg-black dark:bg-white"
-						style={(model?.info?.meta?.profile_image_url ?? '/static/favicon.png') !==
-						'/static/favicon.png'
-							? `background-image: url('${model?.info?.meta?.profile_image_url}');`
-							: ''}
+									: 'size-12'}  transition-all rounded-full bg-cover bg-center bg-no-repeat"
+						style={`background-image: url('${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model?.id}&lang=${$i18n.language}&voice=true');`}
 					/>
 				{/if}
 				<!-- navbar -->
@@ -841,14 +836,8 @@
 									? 'size-48'
 									: rmsLevel * 100 > 1
 										? 'size-44'
-										: 'size-40'}  transition-all rounded-full {(model?.info?.meta
-								?.profile_image_url ?? '/static/favicon.png') !== '/static/favicon.png'
-								? ' bg-cover bg-center bg-no-repeat'
-								: 'bg-black dark:bg-white'} "
-							style={(model?.info?.meta?.profile_image_url ?? '/static/favicon.png') !==
-							'/static/favicon.png'
-								? `background-image: url('${model?.info?.meta?.profile_image_url}');`
-								: ''}
+										: 'size-40'} transition-all rounded-full bg-cover bg-center bg-no-repeat"
+							style={`background-image: url('${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model?.id}&lang=${$i18n.language}&voice=true');`}
 						/>
 					{/if}
 				</button>

src/lib/components/chat/MessageInput/Commands/Models.svelte

@@ -5,7 +5,7 @@
 	import { tick, getContext } from 'svelte';
 
 	import { models } from '$lib/stores';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	const i18n = getContext('i18n');
@@ -83,7 +83,7 @@
 			>
 				<div class="flex text-black dark:text-gray-100 line-clamp-1">
 					<img
-						src={model?.info?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+						src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 						alt={model?.name ?? model.id}
 						class="rounded-full size-5 items-center mr-2"
 					/>

src/lib/components/chat/Messages/MultiResponseMessages.svelte

@@ -272,14 +272,6 @@
 										}}
 									>
 										<div class="flex items-center gap-1.5">
-											<!-- <ProfileImage
-												src={model?.info?.meta?.profile_image_url ??
-													($i18n.language === 'dg-DG'
-														? `${WEBUI_BASE_URL}/doge.png`
-														: `${WEBUI_BASE_URL}/favicon.png`)}
-												className={'size-5 assistant-message-profile-image'}
-											/> -->
-
 											<div class="-translate-y-[1px]">
 												{model ? `${model.name}` : history.messages[_messageId]?.model}
 											</div>

src/lib/components/chat/Messages/ProfileImage.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <img
-	crossorigin="anonymous"
 	aria-hidden="true"
 	src={src === ''
 		? `${WEBUI_BASE_URL}/static/favicon.png`

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -36,7 +36,7 @@
 		removeDetails,
 		removeAllDetails
 	} from '$lib/utils';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
@@ -627,10 +627,7 @@
 	>
 		<div class={`shrink-0 ltr:mr-3 rtl:ml-3 hidden @lg:flex mt-1 `}>
 			<ProfileImage
-				src={model?.info?.meta?.profile_image_url ??
-					($i18n.language === 'dg-DG'
-						? `${WEBUI_BASE_URL}/doge.png`
-						: `${WEBUI_BASE_URL}/favicon.png`)}
+				src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 				className={'size-8 assistant-message-profile-image'}
 			/>
 		</div>

src/lib/components/chat/Messages/UserMessage.svelte

@@ -124,10 +124,7 @@
 	{#if !($settings?.chatBubble ?? true)}
 		<div class={`shrink-0 ltr:mr-3 rtl:ml-3 mt-1`}>
 			<ProfileImage
-				src={message.user
-					? ($models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ??
-						`${WEBUI_BASE_URL}/user.png`)
-					: (user?.profile_image_url ?? `${WEBUI_BASE_URL}/user.png`)}
+				src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
 				className={'size-8 user-message-profile-image'}
 			/>
 		</div>

src/lib/components/chat/ModelSelector/ModelItem.svelte

@@ -5,7 +5,7 @@
 	import dayjs from '$lib/dayjs';
 
 	import { mobile, settings, user } from '$lib/stores';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import { copyToClipboard, sanitizeResponseContent } from '$lib/utils';
@@ -77,8 +77,7 @@
 			<div class="flex items-center min-w-fit">
 				<Tooltip content={$user?.role === 'admin' ? (item?.value ?? '') : ''} placement="top-start">
 					<img
-						src={item.model?.info?.meta?.profile_image_url ??
-							`${WEBUI_BASE_URL}/static/favicon.png`}
+						src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${item.model.id}&lang=${$i18n.language}`}
 						alt="Model"
 						class="rounded-full size-5 flex items-center"
 					/>

src/lib/components/chat/Navbar.svelte

@@ -38,6 +38,7 @@
 	import ChatPlus from '../icons/ChatPlus.svelte';
 	import ChatCheck from '../icons/ChatCheck.svelte';
 	import Knobs from '../icons/Knobs.svelte';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -242,7 +243,7 @@
 								<div class=" self-center">
 									<span class="sr-only">{$i18n.t('User menu')}</span>
 									<img
-										src={$user?.profile_image_url}
+										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
 										class="size-6 object-cover rounded-full"
 										alt=""
 										draggable="false"

src/lib/components/chat/Overview/Node.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { Handle, Position, type NodeProps } from '@xyflow/svelte';
 
 	import ProfileImage from '../Messages/ProfileImage.svelte';
@@ -21,7 +21,7 @@
 		{#if data.message.role === 'user'}
 			<div class="flex w-full">
 				<ProfileImage
-					src={data.user?.profile_image_url ?? `${WEBUI_BASE_URL}/user.png`}
+					src={`${WEBUI_API_BASE_URL}/users/${data.user.id}/profile/image`}
 					className={'size-5 -translate-y-[1px]'}
 				/>
 				<div class="ml-2">
@@ -41,7 +41,7 @@
 		{:else}
 			<div class="flex w-full">
 				<ProfileImage
-					src={data?.model?.info?.meta?.profile_image_url ?? ''}
+					src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${data.model.id}&lang=${$i18n.language}`}
 					className={'size-5 -translate-y-[1px]'}
 				/>
 

src/lib/components/chat/Placeholder.svelte

@@ -20,7 +20,7 @@
 		currentChatPage
 	} from '$lib/stores';
 	import { sanitizeResponseContent, extractCurlyBraceWords } from '$lib/utils';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	import Suggestions from './Suggestions.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -121,11 +121,7 @@
 										}}
 									>
 										<img
-											crossorigin="anonymous"
-											src={model?.info?.meta?.profile_image_url ??
-												($i18n.language === 'dg-DG'
-													? `${WEBUI_BASE_URL}/doge.png`
-													: `${WEBUI_BASE_URL}/static/favicon.png`)}
+											src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model?.id}&lang=${$i18n.language}`}
 											class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-100 dark:border-none"
 											aria-hidden="true"
 											draggable="false"

src/lib/components/layout/Sidebar.svelte

@@ -41,7 +41,7 @@
 		importChat
 	} from '$lib/apis/chats';
 	import { createNewFolder, getFolders, updateFolderParentIdById } from '$lib/apis/folders';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	import ArchivedChatsModal from './ArchivedChatsModal.svelte';
 	import UserMenu from './Sidebar/UserMenu.svelte';
@@ -559,7 +559,6 @@
 					>
 						<div class=" self-center flex items-center justify-center size-9">
 							<img
-								crossorigin="anonymous"
 								src="{WEBUI_BASE_URL}/static/favicon.png"
 								class="sidebar-new-chat-icon size-6 rounded-full group-hover:hidden"
 								alt=""
@@ -694,7 +693,7 @@
 							>
 								<div class=" self-center flex items-center justify-center size-9">
 									<img
-										src={$user?.profile_image_url}
+										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
 										class=" size-6 object-cover rounded-full"
 										alt={$i18n.t('Open User Profile Menu')}
 										aria-label={$i18n.t('Open User Profile Menu')}
@@ -1233,7 +1232,7 @@
 							>
 								<div class=" self-center mr-3">
 									<img
-										src={$user?.profile_image_url}
+										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
 										class=" size-6 object-cover rounded-full"
 										alt={$i18n.t('Open User Profile Menu')}
 										aria-label={$i18n.t('Open User Profile Menu')}

src/lib/components/layout/Sidebar/PinnedModelItem.svelte

@@ -3,7 +3,7 @@
 
 	const i18n = getContext('i18n');
 
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import PinSlash from '$lib/components/icons/PinSlash.svelte';
@@ -36,8 +36,7 @@
 		>
 			<div class="self-center shrink-0">
 				<img
-					crossorigin="anonymous"
-					src={model?.info?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+					src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 					class=" size-5 rounded-full -translate-x-[0.5px]"
 					alt="logo"
 				/>

src/lib/components/workspace/Models.svelte

@@ -12,7 +12,7 @@
 	const i18n = getContext('i18n');
 
 	import { WEBUI_NAME, config, mobile, models as _models, settings, user } from '$lib/stores';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import {
 		createNewModel,
 		deleteModelById,
@@ -435,13 +435,12 @@
 							<div class="self-center pl-0.5">
 								<div class="flex bg-white rounded-2xl">
 									<div
-										class="{model.is_active ? '' : 'opacity-50 dark:opacity-50'} {model.meta
-											.profile_image_url !== `${WEBUI_BASE_URL}/static/favicon.png`
-											? 'bg-transparent'
-											: 'bg-white'} rounded-2xl"
+										class="{model.is_active
+											? ''
+											: 'opacity-50 dark:opacity-50'} bg-transparent rounded-2xl"
 									>
 										<img
-											src={model?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
+											src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
 											alt="modelfile profile"
 											class=" rounded-2xl size-12 object-cover"
 										/>

src/routes/(app)/notes/+page.svelte

@@ -14,6 +14,7 @@
 	import Notes from '$lib/components/notes/Notes.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Sidebar from '$lib/components/icons/Sidebar.svelte';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	let loaded = false;
 
@@ -95,7 +96,7 @@
 								>
 									<div class=" self-center">
 										<img
-											src={$user?.profile_image_url}
+											src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
 											class="size-6 object-cover rounded-full"
 											alt="User profile"
 											draggable="false"

src/routes/+layout.svelte

@@ -46,7 +46,7 @@
 	import { getAllTags, getChatList } from '$lib/apis/chats';
 	import { chatCompletion } from '$lib/apis/openai';
 
-	import { WEBUI_BASE_URL, WEBUI_HOSTNAME } from '$lib/constants';
+	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL, WEBUI_HOSTNAME } from '$lib/constants';
 	import { bestMatchingLanguage } from '$lib/utils';
 	import { setTextScale } from '$lib/utils/text-scale';
 
@@ -487,7 +487,7 @@
 					if ($settings?.notificationEnabled ?? false) {
 						new Notification(`${data?.user?.name} (#${event?.channel?.name}) • Open WebUI`, {
 							body: data?.content,
-							icon: data?.user?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`
+							icon: `${WEBUI_API_BASE_URL}/users/${data?.user?.id}/profile/image`
 						});
 					}
 				}