diff --git a/src/components/BotProfileImage.tsx b/src/components/BotProfileImage.tsx
index 8eb53ca42..a99f570d3 100644
--- a/src/components/BotProfileImage.tsx
+++ b/src/components/BotProfileImage.tsx
@@ -4,9 +4,35 @@ import { useTheme } from 'styled-components';
 import { useChatContext } from './chat/context/ChatProvider';
 import { getColorBasedOnSaturation } from '../colors';
 import { useConstantState } from '../context/ConstantContext';
+import { themedColors } from '../foundation/colors/css';
 import BotProfileIcon from '../icons/bot-profile-image-small.svg';
 
-const Container = styled.span<{ backgroundColor: string; size: number }>`
+function isMaybeFavicon(url: string) {
+  if (url.length < 4) return false;
+  const fileName = url.substring(url.lastIndexOf('/') + 1);
+  return fileName.startsWith('fav_');
+}
+
+const FaviconContainer = styled.div<{ size: number }>`
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${themedColors.bg2};
+`;
+
+const FaviconImage = styled.img<{ size: number }>`
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
+  box-sizing: border-box;
+  object-fit: contain;
+  padding: 19%;
+`;
+
+const IconContainer = styled.span<{ backgroundColor: string; size: number }>`
   width: ${({ size }) => `${size}px`};
   height: ${({ size }) => `${size}px`};
   background: ${({ backgroundColor }) => backgroundColor};
@@ -24,26 +50,31 @@ const Icon = styled(BotProfileIcon)<{ fill: string }>`
   }
 `;
 
-type Props = {
-  size: number;
-};
-
-function BotProfileImage({ size }: Props) {
+function BotProfileImage({ size }: { size: number }) {
   const theme = useTheme();
 
   const { botStudioEditProps } = useConstantState();
   const { botUser } = useChatContext();
   const { botInfo } = botStudioEditProps ?? {};
+
   const profileUrl = botInfo?.profileUrl ?? botUser?.profileUrl;
 
   if (profileUrl) {
+    if (isMaybeFavicon(profileUrl)) {
+      return (
+        <FaviconContainer size={size}>
+          <FaviconImage size={size} src={profileUrl} alt={'bot profile'} />
+        </FaviconContainer>
+      );
+    }
+
     return <img src={profileUrl} style={{ borderRadius: '50%', width: size, height: size }} alt={'bot profile'} />;
   }
 
   return (
-    <Container size={size} backgroundColor={theme.accentColor}>
+    <IconContainer size={size} backgroundColor={theme.accentColor}>
       <Icon fill={getColorBasedOnSaturation(theme.accentColor)} />
-    </Container>
+    </IconContainer>
   );
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index 22a1ea80b..5c0d73ced 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,12 +8,24 @@ const WidgetApp = () => {
   const appId = urlParams.get('app_id') ?? import.meta.env.VITE_CHAT_WIDGET_APP_ID;
   const botId = urlParams.get('bot_id') ?? import.meta.env.VITE_CHAT_WIDGET_BOT_ID;
   const locale = urlParams.get('locale') ?? undefined;
+  const region = urlParams.get('region') ?? undefined;
+
+  function getHost(region?: string) {
+    if (region && region.startsWith('no')) {
+      return { apiHost: `https://api-${region}.sendbirdtest.com`, wsHost: `wss://ws-${region}.sendbirdtest.com` };
+    }
+    return {
+      apiHost: region ? `https://api-cf-${region}.sendbird.com` : undefined,
+      wsHost: undefined,
+    };
+  }
 
   if (!appId || !botId) {
     return null;
   }
 
-  return <App applicationId={appId} botId={botId} locale={locale} />;
+  const host = getHost(region);
+  return <App applicationId={appId} botId={botId} locale={locale} apiHost={host.apiHost} wsHost={host.wsHost} />;
 };
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(