diff --git a/app.vue b/app.vue
index f70826de..c6b132ea 100644
--- a/app.vue
+++ b/app.vue
@@ -1,12 +1,13 @@
 <script setup>
 import { APP_NAME } from './constants'
 
+const isDev = process.dev
+const isPreview = window.location.hostname.includes('deploy-preview')
+
 useHead({
-  titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${import.meta.env.DEV ? ' (dev)' : window.location.hostname.includes('deploy-preview') ? '(preview)' : ''}`,
+  titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
   link: [
-    {
-      rel: 'icon', type: 'image/svg+png', href: '/favicon.png',
-    },
+    { rel: 'icon', type: 'image/svg+png', href: isDev || isPreview ? '/favicon-dev.png' : '/favicon.png' },
   ],
 })
 
diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
index b42968fd..ba716242 100644
--- a/components/nav/NavTitle.vue
+++ b/components/nav/NavTitle.vue
@@ -1,5 +1,5 @@
 <script setup>
-const sub = import.meta.env.DEV ? 'dev' : window.location.hostname.includes('deploy-preview') ? 'preview' : 'alpha'
+const sub = process.dev ? 'dev' : window.location.hostname.includes('deploy-preview') ? 'preview' : 'alpha'
 </script>
 
 <template>
diff --git a/public/favicon-dev.png b/public/favicon-dev.png
new file mode 100644
index 00000000..faf76484
Binary files /dev/null and b/public/favicon-dev.png differ