diff --git a/web/components/config/EditLogo.tsx b/web/components/config/EditLogo.tsx
index 91cb4f94f..e51007964 100644
--- a/web/components/config/EditLogo.tsx
+++ b/web/components/config/EditLogo.tsx
@@ -18,7 +18,12 @@ import {
 } from '../../utils/input-statuses';
 import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
 
-import { ACCEPTED_IMAGE_TYPES, getBase64 } from '../../utils/images';
+import {
+  ACCEPTED_IMAGE_TYPES,
+  getBase64,
+  MAX_IMAGE_FILESIZE,
+  readableBytes,
+} from '../../utils/images';
 
 export const EditLogo: FC = () => {
   const [logoUrl, setlogoUrl] = useState(null);
@@ -47,6 +52,14 @@ export const EditLogo: FC = () => {
 
     // eslint-disable-next-line consistent-return
     return new Promise<void>((res, rej) => {
+      if (file.size > MAX_IMAGE_FILESIZE) {
+        const msg = `File size is too big: ${readableBytes(file.size)}`;
+        setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${msg}`));
+        resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+        setLoading(false);
+        // eslint-disable-next-line no-promise-executor-return
+        return rej();
+      }
       if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
         const msg = `File type is not supported: ${file.type}`;
         setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${msg}`));
diff --git a/web/utils/config-constants.tsx b/web/utils/config-constants.tsx
index 88c1855c3..e555a032d 100644
--- a/web/utils/config-constants.tsx
+++ b/web/utils/config-constants.tsx
@@ -111,7 +111,7 @@ export const TEXTFIELD_PROPS_LOGO = {
   maxLength: 255,
   placeholder: '/img/mylogo.png',
   label: 'Logo',
-  tip: 'Upload your logo if you have one. We recommend that you use a square image that is at least 256x256. SVGs are discouraged as they cannot be displayed on all social media platforms.',
+  tip: 'Upload your logo if you have one (max size 2 MB). We recommend that you use a square image that is at least 256x256. SVGs are discouraged as they cannot be displayed on all social media platforms.',
 };
 export const TEXTFIELD_PROPS_ADMIN_PASSWORD = {
   apiPath: API_STREAM_KEY,
diff --git a/web/utils/images.ts b/web/utils/images.ts
index 85dbebe5a..97ea19fcb 100644
--- a/web/utils/images.ts
+++ b/web/utils/images.ts
@@ -1,3 +1,6 @@
+import { RcFile } from 'antd/lib/upload';
+
+export const MAX_IMAGE_FILESIZE = 2097152;
 export const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
 
 export function getBase64(img: File | Blob, callback: (imageUrl: string | ArrayBuffer) => void) {
@@ -5,3 +8,11 @@ export function getBase64(img: File | Blob, callback: (imageUrl: string | ArrayB
   reader.addEventListener('load', () => callback(reader.result));
   reader.readAsDataURL(img);
 }
+
+export function readableBytes(bytes: number): string {
+  const index = Math.floor(Math.log(bytes) / Math.log(1024));
+  const SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const size = Number((bytes / Math.pow(1024, index)).toFixed(2)) * 1;
+
+  return `${size} ${SIZE_UNITS[index]}`;
+}