Appearance

useFavicon Composable ​

File Information ​

  • Path: app/composables/core/layouts/useFavicon.ts
  • Purpose: Keeps the browser tab favicon in sync with the brand portal's favicon URL
  • Type: Core Composable (client-only)

Overview ​

useFavicon watches a reactive faviconUrl ref and updates the <link rel="icon"> DOM element whenever the URL changes. It is client-only — returns early on the server.

Parameters ​

ParameterTypeDescription
faviconUrlRef<string> | ComputedRef<string>Reactive URL of the brand favicon from appDataStore

Behavior ​

  1. On mount (client only), watches faviconUrl with { immediate: true }
  2. On change: finds existing <link rel="icon"> or creates one and appends to <head>
  3. Sets link.href to the new favicon URL
  4. No-ops when href is empty

Usage Example ​

typescript
import { useFavicon } from '~/composables/core/layouts/useFavicon'

const faviconUrl = computed(() => appDataStore.portalData?.favicon_url ?? '')
useFavicon(faviconUrl)