Set favicon and logo on output

web-app/src/lib/templates/blog/BlogArticle.svelte

@@ -4,6 +4,7 @@
   import BlogFooter from "./common/BlogFooter.svelte";
 
   const {
+    favicon,
     title,
     logoType,
     logo,
@@ -12,6 +13,7 @@
     publicationDate,
     footerAdditionalText
   }: {
+    favicon: string;
     title: string;
     logoType: "text" | "image";
     logo: string;
@@ -22,7 +24,7 @@
   } = $props();
 </script>
 
-<BlogHead {title} nestingLevel={1} />
+<BlogHead {title} {favicon} nestingLevel={1} />
 
 <BlogNav {logoType} {logo} />
 

web-app/src/lib/templates/blog/BlogIndex.svelte

@@ -4,6 +4,7 @@
   import BlogFooter from "./common/BlogFooter.svelte";
 
   const {
+    favicon,
     title,
     logoType,
     logo,
@@ -11,6 +12,7 @@
     articles,
     footerAdditionalText
   }: {
+    favicon: string;
     title: string;
     logoType: "text" | "image";
     logo: string;
@@ -20,7 +22,7 @@
   } = $props();
 </script>
 
-<BlogHead {title} />
+<BlogHead {title} {favicon} />
 
 <BlogNav {logoType} {logo} />
 

web-app/src/lib/templates/blog/common/BlogHead.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  const { title, nestingLevel = 0 }: { title: string; nestingLevel?: number } = $props();
+  const {
+    title,
+    favicon,
+    nestingLevel = 0
+  }: { title: string; favicon: string; nestingLevel?: number } = $props();
 </script>
 
 <svelte:head>
@@ -8,5 +12,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
     <link rel="stylesheet" href={`${"../".repeat(nestingLevel)}styles.css`} />
+    {#if favicon}
+      <link rel="icon" href={favicon} />
+    {/if}
   </head>
 </svelte:head>

web-app/src/lib/templates/blog/common/BlogNav.svelte

@@ -10,7 +10,7 @@
           <strong>{logo}</strong>
         </p>
       {:else}
-        <img src={logo} alt="" />
+        <img src={logo} width="24" height="24" alt="" />
       {/if}
     </a>
   </div>