diff --git a/frontend/index.html b/frontend/index.html
index 9f89a32..6999a89 100644
--- a/frontend/index.html
+++ b/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>
diff --git a/frontend/public/img/apple-touch-icon.png b/frontend/public/img/apple-touch-icon.png
new file mode 100644
index 0000000..abbddcd
Binary files /dev/null and b/frontend/public/img/apple-touch-icon.png differ
diff --git a/frontend/public/img/favicon-32.png b/frontend/public/img/favicon-32.png
new file mode 100644
index 0000000..473f410
Binary files /dev/null and b/frontend/public/img/favicon-32.png differ
diff --git a/frontend/public/img/icon-192.png b/frontend/public/img/icon-192.png
new file mode 100644
index 0000000..95e9049
Binary files /dev/null and b/frontend/public/img/icon-192.png differ
diff --git a/frontend/public/img/icon-512.png b/frontend/public/img/icon-512.png
new file mode 100644
index 0000000..47885b0
Binary files /dev/null and b/frontend/public/img/icon-512.png differ
diff --git a/frontend/public/img/icon-64.png b/frontend/public/img/icon-64.png
new file mode 100644
index 0000000..1511ce7
Binary files /dev/null and b/frontend/public/img/icon-64.png differ
diff --git a/frontend/public/img/icon.png b/frontend/public/img/icon.png
new file mode 100644
index 0000000..ba9acce
Binary files /dev/null and b/frontend/public/img/icon.png differ
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 3ef907f..d505230 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/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>
 
diff --git a/frontend/src/components/layout/header.css b/frontend/src/components/layout/header.css
index 16ff1ec..8232e46 100644
--- a/frontend/src/components/layout/header.css
+++ b/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);