Add the app icon as favicon, touch icon and header mark

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XBRLomdLK9jF7wU7a8AA6H

frontend/index.html

@@ -11,6 +11,10 @@
       crossorigin
     />
     <title>Föräldraledigplannerare</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/img/icon-192.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
+    <meta name="theme-color" content="#2f5bea" />
   </head>
   <body>
     <div id="root"></div>

frontend/src/components/layout/Header.tsx

@@ -41,6 +41,7 @@ export function Header({
     <header className={`header header--${variant}`} role="banner" data-testid="header">
       <div className="header__bar">
         <div className="header__brand" data-testid="header-title">
+          <img className="header__brand-mark" src="/img/icon-64.png" alt="" width={24} height={24} />
           {t('app.name')}
         </div>
 

frontend/src/components/layout/header.css

@@ -24,6 +24,8 @@
 }
 
 .header__brand {
+  display: inline-flex;
+  align-items: center;
   font-size: var(--fs-lg);
   font-weight: 600;
   letter-spacing: -0.01em;
@@ -31,6 +33,15 @@
   white-space: nowrap;
 }
 
+.header__brand-mark {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  margin-right: var(--sp-2);
+  vertical-align: middle;
+  flex: none;
+}
+
 .header__nav {
   display: flex;
   gap: var(--sp-1);