Fix favicon support for query and fragment in URLs

.changeset/neat-deers-pretend.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes favicon url parsing of query and fragment

packages/starlight/__tests__/basics/schema.test.ts

@@ -12,6 +12,33 @@ describe('FaviconSchema', () => {
 		expect(favicon.type).toBe('image/jpeg');
 	});
 
+	test('returns the proper href and type attributes when contains query', () => {
+		const icon = '/custom-icon.gif?v=123456&x=987654';
+
+		const favicon = FaviconSchema().parse(icon);
+
+		expect(favicon.href).toBe(icon);
+		expect(favicon.type).toBe('image/gif');
+	});
+
+	test('returns the proper href and type attributes when contains fragment', () => {
+		const icon = '/custom-icon.png#favicon';
+
+		const favicon = FaviconSchema().parse(icon);
+
+		expect(favicon.href).toBe(icon);
+		expect(favicon.type).toBe('image/png');
+	});
+
+	test('returns the proper href and type attributes when contains query and fragment', () => {
+		const icon = '/custom-icon.ico?v=123456&x=987654#favicon';
+
+		const favicon = FaviconSchema().parse(icon);
+
+		expect(favicon.href).toBe(icon);
+		expect(favicon.type).toBe('image/x-icon');
+	});
+
 	test('throws on invalid favicon extensions', () => {
 		expect(() => FaviconSchema().parse('/favicon.pdf')).toThrow();
 	});

packages/starlight/schemas/favicon.ts

@@ -1,5 +1,6 @@
 import { extname } from 'node:path';
 import { z } from 'astro/zod';
+import { splitQueryAndFragment } from '../utils/path';
 
 const faviconTypeMap = {
 	'.ico': 'image/x-icon',
@@ -15,7 +16,8 @@ export const FaviconSchema = () =>
 		.string()
 		.default('/favicon.svg')
 		.transform((favicon, ctx) => {
-			const ext = extname(favicon).toLowerCase();
+			const { base } = splitQueryAndFragment(favicon);
+			const ext = extname(base).toLowerCase();
 
 			if (!isFaviconExt(ext)) {
 				ctx.addIssue({

packages/starlight/utils/path.ts

@@ -50,3 +50,14 @@ export function ensureHtmlExtension(path: string) {
 	}
 	return ensureLeadingSlash(path);
 }
+
+export function splitQueryAndFragment(url: string) {
+	const [urlWithQuery, hash] = url.split('#');
+	const [urlBase, queryString] = (urlWithQuery || '').split('?');
+
+	return {
+		base: urlBase || '',
+		query: queryString ? `?${queryString}` : '',
+		fragment: hash ? `#${hash}` : '',
+	};
+}