Add an app icon

frontend/src/App.jsx

@@ -16,6 +16,8 @@ import ManageLabels from './components/ManageLabels';
 import ManageSort from './components/ManageSort';
 import milestonesCache from './utils/milestonesCache';
 import labelsCache, { clearLabelsCache } from './utils/labelsCache';
+import iconImage from './assets/icon.png';
+import './icon.css';
 
 const App = () => {
   // Initialize with cached data if available
@@ -149,22 +151,48 @@ const App = () => {
 
   return (
     <Page>
-      <PageSection>
+      <PageSection
+        style={{ background: 'transparent', backgroundColor: 'transparent' }}
+      >
         <div
           style={{
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
             marginBottom: '1rem',
+            background: 'transparent',
+            backgroundColor: 'transparent',
           }}
         >
-          <Title headingLevel="h1" size="2xl">
-            {projectLoading
-              ? 'Loading...'
-              : project
-                ? `${project.app_name}: ${project.github_repo}`
-                : 'GitHub Project Manager'}
-          </Title>
+          <div
+            className="app-header-icon-container"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '1rem',
+              background: 'transparent',
+            }}
+          >
+            <img
+              src={iconImage}
+              alt="Application icon"
+              className="app-icon"
+              style={{
+                height: '100px',
+                width: 'auto',
+                background: 'transparent',
+                backgroundColor: 'transparent',
+                display: 'block',
+              }}
+            />
+            <Title headingLevel="h1" size="2xl">
+              {projectLoading
+                ? 'Loading...'
+                : project
+                  ? `${project.app_name}: ${project.github_repo}`
+                  : 'GitHub Project Manager'}
+            </Title>
+          </div>
           <div style={{ display: 'flex', gap: '0.5rem' }}>
             <Button
               variant="secondary"

frontend/src/icon.css

@@ -0,0 +1,50 @@
+/* Override PatternFly styles to ensure transparent background for icon */
+html,
+body,
+#root,
+.pf-c-page,
+.pf-c-page__main,
+.pf-c-page__main-section:first-child,
+.pf-c-page__main-section:first-child > div,
+.pf-c-page__main-section:first-child > div > div {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Ensure icon container and image have transparent background */
+.app-header-icon-container {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+.app-icon,
+img.app-icon,
+img[alt='Application icon'],
+div.app-icon {
+  background: transparent !important;
+  background-color: transparent !important;
+  mix-blend-mode: normal !important;
+  /* Ensure image transparency is preserved */
+  image-rendering: -webkit-optimize-contrast;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+
+/* Ensure background-image preserves transparency */
+div.app-icon {
+  background-color: transparent !important;
+  background: transparent !important;
+}
+
+/* Target any PatternFly wrapper elements */
+.pf-c-page__main-section:first-child * {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Specifically override any PatternFly card or panel backgrounds near the icon */
+.app-header-icon-container,
+.app-header-icon-container * {
+  background: transparent !important;
+  background-color: transparent !important;
+}

frontend/src/main.jsx

@@ -3,6 +3,15 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import '@patternfly/react-core/dist/styles/base.css';
 import App from './App';
+import faviconUrl from './assets/favicon.ico';
+
+// Set favicon dynamically
+const link =
+  document.querySelector("link[rel~='icon']") || document.createElement('link');
+link.rel = 'icon';
+link.type = 'image/png';
+link.href = faviconUrl;
+document.getElementsByTagName('head')[0].appendChild(link);
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>