feat: 添加网站图标和logo，更新头部组件以使用新logo

Author: zhihao

public/favicon.ico

@@ -24,9 +24,9 @@ const { title, description, image = "/nano.png" } = Astro.props;
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon-dark.svg`} media="(prefers-color-scheme: dark)">
-<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon-light.svg`} media="(prefers-color-scheme: light)">
-<link rel="icon" type="image/x-icon" href={`${import.meta.env.BASE_URL}/favicon-light.svg`}>
+<!-- <link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon-dark.svg`} media="(prefers-color-scheme: dark)">
+<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon-light.svg`} media="(prefers-color-scheme: light)"> -->
+<link rel="icon" type="image/x-icon" href={`${import.meta.env.BASE_URL}/favicon.ico`}>
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->

public/logo.png

@@ -8,9 +8,17 @@ import { SITE, ROUTERS, WEBSITE_PATHNAME } from "@consts";
   <Container>
     <div class="flex flex-wrap gap-y-2 justify-between">
       <Link href={WEBSITE_PATHNAME.HOME} underline={false}>
-        <div class="font-semibold">
+        <img
+          src={SITE.LOGO}
+          alt={SITE.NAME}
+          class="w-4 h-4 inline-block"
+          loading="lazy"
+          width="16"
+          height="16"
+        />
+        <span class="font-semibold leading-none">
           {SITE.NAME}
-        </div>
+        </span>
       </Link>
       <nav class="flex gap-1">
         {

src/components/Head.astro

@@ -6,6 +6,7 @@ export const SITE: Site = {
   NUM_POSTS_ON_HOMEPAGE: 3,
   NUM_WORKS_ON_HOMEPAGE: 2,
   NUM_PROJECTS_ON_HOMEPAGE: 3,
+  LOGO: "/blog/logo.png",
 };
 
 export enum PAGE_KEY {

src/components/Header.astro

@@ -4,6 +4,7 @@ export type Site = {
   NUM_POSTS_ON_HOMEPAGE: number;
   NUM_WORKS_ON_HOMEPAGE: number;
   NUM_PROJECTS_ON_HOMEPAGE: number;
+  LOGO: string;
 };
 
 export type Metadata = {