Generate dynamic favicons

This commit is contained in:
Ricardo Tribaldos 2024-03-26 12:19:13 -05:00
parent 4de42dc850
commit c1bccf25d5
4 changed files with 21 additions and 5 deletions

View file

@ -191,9 +191,7 @@ Static files served directly to the browser are within the `public` directory at
```md
public/
├── apple-touch-icon.png
├── favicon.ico
├── icon.svg
├── scripts/
│ └── vendor/
│ ├── gsap/ # Animations powered by GSAP (GreenSock Animation Platform)

Binary file not shown.

Before

(image error) Size: 4.2 KiB

View file

@ -1,4 +1,8 @@
---
import { getImage } from "astro:assets";
import faviconSvgSrc from "@/images/icon.svg";
import faviconSrc from "@/images/icon.png";
// Default properties for the Meta component. These values are used if props are not provided.
// 'title' sets the default page title for the website.
// 'meta' sets a default description meta tag to describe the page content.
@ -35,6 +39,20 @@ const ogDescription: string =
"Equip your projects with ScrewFast's top-quality hardware tools and expert construction services. Trusted by industry leaders, ScrewFast offers simplicity, affordability, and reliability. Experience the difference with user-centric design and cutting-edge tools. Start exploring now!"; // Set the Open Graph description
const URL: string = `${Astro.site}`; // Set the website URL in astro.config.mjs
const socialImage: string = `${Astro.site}/social.png`; // Set the path for the social media image
// Generate and optimize the favicon images
const faviconSvg = await getImage({
src: faviconSvgSrc,
format: 'svg',
});
const appleTouchIcon = await getImage({
src: faviconSrc,
width: 180,
height: 180,
format: 'png',
});
---
<!-- Inject structured data into the page if provided. This data is formatted as JSON-LD, a method recommended by Google for structured data pass:
@ -79,9 +97,9 @@ const socialImage: string = `${Astro.site}/social.png`; // Set the path for the
<!-- Links for favicons -->
<link href="/favicon.ico" rel="icon" sizes="any" type="image/x-icon" />
<link href="/icon.svg" rel="icon" type="image/svg+xml" sizes="any" />
<link href={faviconSvg.src} rel="icon" type="image/svg+xml" sizes="any" />
<meta name="mobile-web-app-capable" content="yes" />
<link href="/apple-touch-icon.png" rel="apple-touch-icon" />
<link href="/apple-touch-icon.png" rel="shortcut icon" />
<link href={appleTouchIcon.src} rel="apple-touch-icon" />
<link href={appleTouchIcon.src} rel="shortcut icon" />
<!-- Set theme color -->
<meta name="theme-color" content="#facc15" />

View file

Before

(image error) Size: 987 B

After

(image error) Size: 987 B