feat: add full favicon support

This commit is contained in:
grassblock 2025-06-04 18:17:29 +08:00
parent c50855a5de
commit 9590e739b0
8 changed files with 44 additions and 10 deletions

BIN
src/assets/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 KiB

2
src/assets/favicon.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -1,4 +1,15 @@
---
import Favicon from "../../../assets/favicon.png";
import FaviconSvg from '../../../assets/favicon.svg';
import {getImage} from "astro:assets";
const appleTouchIcon = await getImage({
src: Favicon,
width: 180,
height: 180,
format: 'png'
})
interface Props {
title: string;
description: string;
@ -13,6 +24,11 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
<meta name="title" content={title} />
{author && <meta name="author" content={author} />}
<meta name="description" content={description} />
{/* PWA */}
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href={FaviconSvg.src} type="image/svg+xml" />
<link rel="apple-touch-icon" href={appleTouchIcon.src} />
<link rel="manifest" href="/manifest.json" />
{/* Open Graph / Facebook */}
<meta name="og:title" content={title} />
<meta name="og:description" content={description} />

View file

@ -39,7 +39,6 @@ const { title = pageTitle, author = siteConfig.defaultAuthor.name,description =
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<Meta title={pageTitle} author={author} description={description} ogImage={ogImage} />
<title>{pageTitle}</title>

17
src/pages/favicon.ico.js Normal file
View file

@ -0,0 +1,17 @@
import sharp from 'sharp'
import ico from 'ico-endec'
import path from 'node:path'
// relative to project root
const faviconSrc = path.resolve('src/assets/favicon.svg')
export const GET = async () => {
// resize to 32px PNG
const buffer = await sharp(faviconSrc).resize(32).toFormat('png').toBuffer()
// generate ico
const icoBuffer = ico.encode([buffer])
return new Response(icoBuffer, {
headers: { 'Content-Type': 'image/x-icon' }
})
}