fix: load favicon defined in afterpython.toml correctly in website

softwareentrepreneer · softwareentrepreneer · commit b70c2ce26457 · 2026-05-25T04:01:54.000-04:00
diff --git a/afterpython/_website/package.json b/afterpython/_website/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@afterpython/project-website-template",
-	"version": "0.3.5",
+	"version": "0.3.8",
 	"license": "Apache-2.0",
 	"type": "module",
 	"packageManager": "pnpm@11.1.1",
diff --git a/afterpython/_website/src/app.html b/afterpython/_website/src/app.html
@@ -2,8 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/favicon.svg" />
-        <link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<script>
 			// Prevent theme flash by applying theme before page renders
diff --git a/afterpython/_website/src/routes/+layout.server.ts b/afterpython/_website/src/routes/+layout.server.ts
@@ -3,6 +3,8 @@ import { CONTENT_TYPES } from '$lib/utils/content';
 import { existsSync } from 'fs';
 import { resolve } from 'path';
 
+const DEFAULT_FAVICON = 'favicon.ico';
+
 export const prerender = true;
 
 async function checkContentType(type: string): Promise<boolean> {
@@ -29,6 +31,7 @@ function checkApiReferenceExists(): boolean {
 type LogoMetadata = {
 	logo?: string;
 	logo_dark?: string;
+	favicon?: string;
 };
 
 export const load: LayoutServerLoad = async () => {
@@ -52,6 +55,7 @@ export const load: LayoutServerLoad = async () => {
 
 		return {
 			...metadataData,
+			favicon: metadataData.favicon ?? DEFAULT_FAVICON,
 			metadataError: null,
 			contentTypes
 		};
@@ -68,7 +72,8 @@ export const load: LayoutServerLoad = async () => {
 			project_url: [],
 			metadataError:
 				'Project metadata not found. Please ensure metadata.json exists in the static folder. Did you forget to run `ap build`?',
-			contentTypes: emptyContentTypes
+			contentTypes: emptyContentTypes,
+			favicon: DEFAULT_FAVICON
 		};
 	}
 };
diff --git a/afterpython/_website/src/routes/+layout.svelte b/afterpython/_website/src/routes/+layout.svelte
@@ -12,6 +12,10 @@
 
 	let { data, children }: LayoutProps = $props();
 
+	const faviconType = $derived(
+		data.favicon?.endsWith('.svg') ? 'image/svg+xml' : 'image/x-icon'
+	);
+
 	// Extract repository URL safely
 	const repositoryUrl = $derived(
 		data.project_url?.find((url: string) => url.startsWith('repository,'))?.split(', ')[1]
@@ -23,6 +27,7 @@
 
 <svelte:head>
 	<title>{siteTitle}</title>
+	<link rel="icon" type={faviconType} href={resolve(`/${data.favicon}`)} />
 </svelte:head>
 
 <div class="flex min-h-screen flex-col bg-bg50">
diff --git a/afterpython/afterpython.toml b/afterpython/afterpython.toml
@@ -5,7 +5,7 @@ url = "https://afterpython.org"  # used in myst.yml's venue.url
 
 [website]
 url = "https://afterpython.afterpython.org"
-favicon = "favicon.ico"
+favicon = "favicon.svg"
 logo = "logo.svg"
 logo_dark = "logo.svg"
 thumbnail = "thumbnail.png"  # thumbnail for the website, also used as default thumbnail for all content types, e.g. blog posts, tutorials, examples, and guides
diff --git a/src/afterpython/builders/metadata.py b/src/afterpython/builders/metadata.py
@@ -62,6 +62,7 @@ def build_metadata():
     # slash form that the Svelte side can hand straight to `asset()`.
     metadata_json["logo"] = _resolve_logo_path(website.get("logo", ""))
     metadata_json["logo_dark"] = _resolve_logo_path(website.get("logo_dark", ""))
+    metadata_json["favicon"] = _resolve_logo_path(website.get("favicon", ""))
 
     with open(build_path / "metadata.json", "w") as f:
         json.dump(metadata_json, f, indent=2)

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@afterpython/project-website-template",`
`3`		`- "version": "0.3.5",`
	`3`	`+ "version": "0.3.8",`
`4`	`4`	`"license": "Apache-2.0",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"packageManager": "pnpm@11.1.1",`