diff --git a/assets/favicon-alert.png b/assets/favicon-alert.png
new file mode 100644
index 00000000..b80dc3a0
Binary files /dev/null and b/assets/favicon-alert.png differ
diff --git a/routes/_components/NavItem.html b/routes/_components/NavItem.html
index d5bde53d..081b6e5c 100644
--- a/routes/_components/NavItem.html
+++ b/routes/_components/NavItem.html
@@ -7,9 +7,9 @@
       <svg>
         <use xlink:href="{{svg}}" />
       </svg>
-      {{#if numberOfNotifications}}
+      {{#if $hasNotifications}}
         <span class="nav-link-notifications" aria-hidden="true">
-          {{numberOfNotifications}}
+          {{$numberOfNotifications}}
         </span>
       {{/if}}
     </div>
@@ -115,23 +115,15 @@
   export default {
     store: () => store,
     computed: {
-      ariaLabel: (page, name, label, numberOfNotifications) => {
+      ariaLabel: (page, name, label, $numberOfNotifications) => {
         let res = label
         if (page === name) {
           res += ' (current page)'
         }
         if (name === 'notifications') {
-          res += ` (${numberOfNotifications})`
+          res += ` (${$numberOfNotifications})`
         }
         return res
-      },
-      numberOfNotifications: ($timelines, $currentInstance, $currentTimeline) => {
-        return $currentTimeline !== 'notifications' &&
-          $timelines &&
-          $timelines[$currentInstance] &&
-          $timelines[$currentInstance].notifications &&
-          $timelines[$currentInstance].notifications.itemIdsToAdd &&
-          $timelines[$currentInstance].notifications.itemIdsToAdd.length
       }
     }
   }
diff --git a/routes/_store/instanceComputations.js b/routes/_store/instanceComputations.js
index f347936c..8d573822 100644
--- a/routes/_store/instanceComputations.js
+++ b/routes/_store/instanceComputations.js
@@ -76,4 +76,23 @@ export function instanceComputations (store) {
       return list ? list.title : ''
     }
   )
+
+  store.compute('numberOfNotifications',
+    ['timelines', 'currentInstance', 'currentTimeline'],
+    (timelines, currentInstance, currentTimeline) => {
+      return currentTimeline !== 'notifications' &&
+        timelines &&
+        timelines[currentInstance] &&
+        timelines[currentInstance].notifications &&
+        timelines[currentInstance].notifications.itemIdsToAdd &&
+        timelines[currentInstance].notifications.itemIdsToAdd.length
+    }
+  )
+
+  store.compute('hasNotifications',
+    ['numberOfNotifications'],
+    (numberOfNotifications) => {
+      return !!numberOfNotifications
+    }
+  )
 }
diff --git a/routes/_store/notificationObservers.js b/routes/_store/notificationObservers.js
new file mode 100644
index 00000000..87bf7621
--- /dev/null
+++ b/routes/_store/notificationObservers.js
@@ -0,0 +1,17 @@
+import { setFavicon } from '../_utils/setFavicon'
+import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
+
+export function notificationObservers (store) {
+  store.observe('hasNotifications', hasNotifications => {
+    if (!process.browser) {
+      return
+    }
+    scheduleIdleTask(() => {
+      if (hasNotifications) {
+        setFavicon('/favicon-alert.png')
+      } else {
+        setFavicon('/favicon.png')
+      }
+    })
+  })
+}
\ No newline at end of file
diff --git a/routes/_store/observers.js b/routes/_store/observers.js
index 228b5d66..70b86ccd 100644
--- a/routes/_store/observers.js
+++ b/routes/_store/observers.js
@@ -1,7 +1,9 @@
 import { instanceObservers } from './instanceObservers'
 import { timelineObservers } from './timelineObservers'
+import { notificationObservers } from './notificationObservers'
 
 export function observers (store) {
   instanceObservers(store)
   timelineObservers(store)
+  notificationObservers(store)
 }
diff --git a/routes/_utils/setFavicon.js b/routes/_utils/setFavicon.js
new file mode 100644
index 00000000..186b630b
--- /dev/null
+++ b/routes/_utils/setFavicon.js
@@ -0,0 +1,14 @@
+// borrowed from https://github.com/HenrikJoreteg/favicon-setter
+export function setFavicon (href) {
+  let faviconId = 'theFavicon'
+  let link = document.createElement('link')
+  let oldLink = document.getElementById(faviconId)
+  link.id = faviconId
+  link.rel = 'shortcut icon'
+  link.type = 'image/png'
+  link.href = href
+  if (oldLink) {
+    document.head.removeChild(oldLink)
+  }
+  document.head.appendChild(link)
+}
\ No newline at end of file
diff --git a/routes/_utils/themeEngine.js b/routes/_utils/themeEngine.js
index 42e3106f..65595dc5 100644
--- a/routes/_utils/themeEngine.js
+++ b/routes/_utils/themeEngine.js
@@ -1,6 +1,6 @@
 import { loadCSS } from 'fg-loadcss'
 
-let meta = process.browser && document.querySelector('meta[name="theme-color"]')
+let meta = process.browser && document.getElementById('theThemeColor')
 
 export function switchToTheme (themeName) {
   let clazzList = document.body.classList
diff --git a/templates/2xx.html b/templates/2xx.html
index 92c3b165..d53d8cb1 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -3,10 +3,10 @@
 <head>
 	<meta charset='utf-8'>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta name='theme-color' content='#4169e1'>
+	<meta id='theThemeColor' name='theme-color' content='#4169e1'>
 
 	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link id='theFavicon' rel='icon' type='image/png' href='/favicon.png'>
 
 	<style>
 /* auto-generated w/ build-sass.js */
@@ -56,7 +56,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
 				link.href = `/theme-${theme}.css`
 				document.head.appendChild(link)
         if (window.__themeColors[theme]) {
-          document.querySelector('meta[name="theme-color"]').content = window.__themeColors[theme]
+          document.getElementById('theThemeColor').content = window.__themeColors[theme]
         }
       }
 		}