feat: allow user to customize favicon (saicaca#47)

* feat: add basic custom favicon feature * add auto-switch icon * revert to the original setting `false`
Phynon · Apr 22, 2024 · bd46805 · bd46805
1 parent 582e76c
commit bd46805
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/config.ts b/src/config.ts
@@ -15,6 +15,14 @@ export const siteConfig: SiteConfig = {
     enable: false,
     src: 'assets/images/demo-banner.png',
   },
+  favicon: {
+    enable: false,
+    size: '32x32',
+    src: {
+      light: '/favicon/favicon-light-32.png',
+      dark: '/favicon/favicon-dark-32.png',
+    }
+  },
 }
 
 export const navBarConfig: NavBarConfig = {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -54,6 +54,7 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
 banner = siteConfig.banner.src;
 
 const enableBanner = siteConfig.banner.enable;
+const enableFavicon = siteConfig.favicon.enable;
 
 let pageTitle;
 if (title) {
@@ -74,14 +75,16 @@ if (title) {
 		<meta name="description" content={description || pageTitle}>
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
+		{enableFavicon ? <link rel="icon" media="(prefers-color-scheme: light)" href={siteConfig.favicon.src.light} sizes={siteConfig.favicon.size}> 
+		<link rel="icon" media="(prefers-color-scheme: dark)" href={siteConfig.favicon.src.dark}> :
 		<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-32.png" sizes="32x32">
 		<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-128.png" sizes="128x128">
 		<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-180.png" sizes="180x180">
 		<link rel="icon" media="(prefers-color-scheme: light)" href="/favicon/favicon-light-192.png" sizes="192x192">
 		<link rel="icon" media="(prefers-color-scheme: dark)"  href="/favicon/favicon-dark-32.png" sizes="32x32">
 		<link rel="icon" media="(prefers-color-scheme: dark)"  href="/favicon/favicon-dark-128.png" sizes="128x128">
 		<link rel="icon" media="(prefers-color-scheme: dark)"  href="/favicon/favicon-dark-180.png" sizes="180x180">
-		<link rel="icon" media="(prefers-color-scheme: dark)"  href="/favicon/favicon-dark-192.png" sizes="192x192">
+		<link rel="icon" media="(prefers-color-scheme: dark)"  href="/favicon/favicon-dark-192.png" sizes="192x192">}
 
 		<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
 

diff --git a/src/types/config.ts b/src/types/config.ts
@@ -9,6 +9,15 @@ export type SiteConfig = {
     enable: boolean
     src: string
   }
+
+  favicon: {
+    enable: boolean
+    size: string
+    src: {
+      light: string
+      dark: string
+    }
+  }
 }
 
 export enum LinkPreset {