diff --git a/quartz.layout.ts b/quartz.layout.ts
index 4a78256aa..81203ec2d 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -3,7 +3,11 @@ import * as Component from "./quartz/components"
// components shared across all pages
export const sharedPageComponents: SharedLayout = {
- head: Component.Head(),
+ head: Component.Head({
+ favicons: [
+ { path: "static/icon.png", size: "200x200", mime: "image/png" }
+ ]
+ }),
header: [],
afterBody: [],
footer: Component.Footer({
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 90e338730..aa0194fe9 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -4,7 +4,17 @@ import { JSResourceToScriptElement } from "../util/resources"
import { googleFontHref } from "../util/theme"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-export default (() => {
+interface Favicon {
+ path: string
+ size?: string
+ mime?: string
+}
+
+interface Options {
+ favicons?: Favicon[]
+}
+
+export default ((opts?: Options) => {
const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
const titleSuffix = cfg.pageTitleSuffix ?? ""
const title =
@@ -17,9 +27,10 @@ export default (() => {
const path = url.pathname as FullSlug
const baseDir = fileData.slug === "404" ? path : pathToRoot(fileData.slug!)
- const iconPath = joinSegments(baseDir, "static/icon.png")
const ogImagePath = `https://${cfg.baseUrl}/static/og-image.png`
+ const icons = opts?.favicons ?? []
+
return (
{title}
@@ -37,7 +48,9 @@ export default (() => {
{cfg.baseUrl && }
-
+ {icons.map(({ path, size, mime }) => (
+
+ ))}
{css.map((href) => (