feat: use blue favicon for dev/preview mode

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' },
   ],
 })
 

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>