Skip to content

Commit 2fea5cc

Browse files
phernandezclaude
phernandez
and
claude
committed
Add theme-aware favicon support
- Configure favicon to use PNG files instead of SVG - Add light/dark mode favicon variants - Update favicon dynamically when theme changes - Support both android-chrome and apple-touch-icon formats - Favicon now matches site theme automatically 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 95cefa7 commit 2fea5cc

File tree

7 files changed

+23
-11
lines changed

7 files changed

+23
-11
lines changed

‎public/android-chrome-dark.png‎

9.56 KB
Loading

‎public/android-chrome-light.png‎

7.49 KB
Loading

‎public/apple-touch-icon-dark.png‎

3.26 KB
Loading

‎public/apple-touch-icon-light.png‎

2.23 KB
Loading

‎public/favicon.svg‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/ThemeToggle.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@ export default function ThemeToggle() {
2121
setTheme(newTheme)
2222
localStorage.setItem('basic-memory-theme', newTheme)
2323
document.documentElement.className = newTheme
24+
25+
// Update favicon
26+
const isDark = newTheme === 'dark'
27+
const iconLink = document.querySelector('link[rel="icon"]') as HTMLLinkElement
28+
const appleTouchLink = document.querySelector('link[rel="apple-touch-icon"]') as HTMLLinkElement
29+
if (iconLink) iconLink.href = isDark ? '/android-chrome-dark.png' : '/android-chrome-light.png'
30+
if (appleTouchLink) appleTouchLink.href = isDark ? '/apple-touch-icon-dark.png' : '/apple-touch-icon-light.png'
2431
}
2532

2633
return (

‎src/layouts/Layout.astro‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@ const { title = 'Basic Memory', description = 'Basic Memory - Persistent memory
1414
<head>
1515
<meta charset="UTF-8" />
1616
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
17+
18+
<!-- Favicons with theme support -->
19+
<link rel="icon" type="image/png" href="/android-chrome-light.png" media="(prefers-color-scheme: light)" />
20+
<link rel="icon" type="image/png" href="/android-chrome-dark.png" media="(prefers-color-scheme: dark)" />
21+
<link rel="apple-touch-icon" href="/apple-touch-icon-light.png" media="(prefers-color-scheme: light)" />
22+
<link rel="apple-touch-icon" href="/apple-touch-icon-dark.png" media="(prefers-color-scheme: dark)" />
23+
1824
<link rel="preconnect" href="https://fonts.googleapis.com" />
1925
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
2026
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
@@ -35,6 +41,15 @@ const { title = 'Basic Memory', description = 'Basic Memory - Persistent memory
3541

3642
// Apply theme immediately to prevent flashing
3743
document.documentElement.className = initialTheme;
44+
45+
// Update favicon based on theme
46+
const updateFavicon = (theme) => {
47+
const isDark = theme === 'dark';
48+
document.querySelector('link[rel="icon"]').href = isDark ? '/android-chrome-dark.png' : '/android-chrome-light.png';
49+
document.querySelector('link[rel="apple-touch-icon"]').href = isDark ? '/apple-touch-icon-dark.png' : '/apple-touch-icon-light.png';
50+
};
51+
52+
updateFavicon(initialTheme);
3853
})();
3954
</script>
4055
</head>

0 commit comments

Comments
 (0)