diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index b7abc18c2..e021b1ec7 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -21,6 +21,7 @@ import i18n from '../dashboard/i18n';
 import createAxios from '../dashboard/helper/APIHelper';
 import commonHelpers from '../dashboard/helper/commons';
 import { getAlertAudio } from '../shared/helpers/AudioNotificationHelper';
+import { initFaviconSwitcher } from '../shared/helpers/faviconHelper';
 import router from '../dashboard/routes';
 import store from '../dashboard/store';
 import vueActionCable from '../dashboard/helper/actionCable';
@@ -80,4 +81,5 @@ window.addEventListener('load', () => {
     })
   );
   getAlertAudio();
+  initFaviconSwitcher();
 });
diff --git a/app/javascript/shared/helpers/AudioNotificationHelper.js b/app/javascript/shared/helpers/AudioNotificationHelper.js
index 90d3bcdaa..8aeb32b91 100644
--- a/app/javascript/shared/helpers/AudioNotificationHelper.js
+++ b/app/javascript/shared/helpers/AudioNotificationHelper.js
@@ -1,6 +1,7 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 const notificationAudio = require('shared/assets/audio/ding.mp3');
 import axios from 'axios';
+import { showBadgeOnFavicon } from './faviconHelper';
 
 export const playNotificationAudio = () => {
   try {
@@ -74,5 +75,6 @@ export const newMessageNotification = data => {
 
   if (enableAudioAlerts && playAudio) {
     window.playAudioAlert();
+    showBadgeOnFavicon();
   }
 };
diff --git a/app/javascript/shared/helpers/faviconHelper.js b/app/javascript/shared/helpers/faviconHelper.js
new file mode 100644
index 000000000..6adc45c60
--- /dev/null
+++ b/app/javascript/shared/helpers/faviconHelper.js
@@ -0,0 +1,21 @@
+export const showBadgeOnFavicon = () => {
+  const favicons = document.querySelectorAll('.favicon');
+
+  favicons.forEach(favicon => {
+    const newFileName = `/favicon-badge-${favicon.sizes[[0]]}.png`;
+    favicon.href = newFileName;
+  });
+};
+
+export const initFaviconSwitcher = () => {
+  const favicons = document.querySelectorAll('.favicon');
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      favicons.forEach(favicon => {
+        const oldFileName = `/favicon-${favicon.sizes[[0]]}.png`;
+        favicon.href = oldFileName;
+      });
+    }
+  });
+};
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index 6ec5e5c01..b9350e3b9 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -23,9 +23,9 @@
       <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
       <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
-      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+      <link class="favicon" rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+      <link class="favicon" rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+      <link class="favicon" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
       <link rel="manifest" href="/manifest.json">
     <% end %>
     <link rel="icon" type="image/png" sizes="512x512" href="<%= @global_config['LOGO_THUMBNAIL'] %>">
diff --git a/public/favicon-badge-16x16.png b/public/favicon-badge-16x16.png
new file mode 100644
index 000000000..325f31785
Binary files /dev/null and b/public/favicon-badge-16x16.png differ
diff --git a/public/favicon-badge-32x32.png b/public/favicon-badge-32x32.png
new file mode 100644
index 000000000..e68f6912f
Binary files /dev/null and b/public/favicon-badge-32x32.png differ
diff --git a/public/favicon-badge-96x96.png b/public/favicon-badge-96x96.png
new file mode 100644
index 000000000..20ab1bde0
Binary files /dev/null and b/public/favicon-badge-96x96.png differ