Added Favicon support to config

App.vue

@@ -6,11 +6,15 @@
   </div>
 </template>
 <script setup lang="ts">
+
 const { $discoveryConfig } = useNuxtApp();
 
 useHead({
   titleTemplate: (titleChunk) => {
     return titleChunk ? `${titleChunk} - ${$discoveryConfig.title}` : $discoveryConfig.title;
-  }
+  },
+  link: [
+    getFavicon()
+  ]
 });
 </script>

composables/utils.ts

@@ -21,3 +21,23 @@ export function getHeaderLogo () : string {
 
   return ($discoveryConfig.headerLogo ?? $discoveryConfig.logo) ?? '/header_logo.svg';
 }
+
+export function getFavicon () : { rel: string; type: string; href: string; sizes: string } {
+  const { $discoveryConfig } = useNuxtApp();
+
+  const favicon = {
+    rel: 'icon',
+    type: 'image/svg+xml',
+    href: '/favicon.svg',
+    sizes: 'any'
+  };
+  const faviconExt = $discoveryConfig.favicon?.split('.').pop();
+
+  // Can Handle SVGs, .ico
+  if (faviconExt === 'ico') {
+    favicon.type = 'image/x-icon';
+    favicon.href = '/' + $discoveryConfig.favicon;
+  }
+
+  return favicon;
+}

config/discoveryConfig.ts

@@ -51,12 +51,22 @@ export interface DiscoveryConfig {
    */
   headerLogo?: string;
 
+// Favicon
+
+  /**
+   * The favicon of the website.
+   * Specifies the favicon that will be used for the Discovery website.
+   * @supportedTypes image/svg+xml, image/x-icon
+   */
+  favicon?: string;
+
   /**
    * The title of the website.
    * Specifies the title that will be used for the Discovery website.
    * @default OpenAtlas Discovery
    */
   title: string;
+
 }
 
 export const defaultDiscoveryConfig: DiscoveryConfig = {

nuxt.config.ts

@@ -13,15 +13,7 @@ export default defineNuxtConfig({
     head: {
       meta: [{
         name: config.title ?? 'OpenAtlas Discovery'
-      }],
-      link: [
-        {
-          rel: 'icon',
-          type: 'image/svg+xml',
-          href: '/favicon.svg',
-          sizes: 'any'
-        }
-      ]
+      }]
     }
   },
   runtimeConfig: {