Fix favicon support for query and fragment in URLs (#2645)

Co-authored-by: Chris Swithinbank <[email protected]>

.changeset/neat-deers-pretend.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes support for favicon URLs that contain a search query and/or hash

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

@@ -15,7 +15,9 @@ export const FaviconSchema = () =>
 		.string()
 		.default('/favicon.svg')
 		.transform((favicon, ctx) => {
-			const ext = extname(favicon).toLowerCase();
+			// favicon can be absolute or relative url
+			const { pathname } = new URL(favicon, 'https://example.com');
+			const ext = extname(pathname).toLowerCase();
 
 			if (!isFaviconExt(ext)) {
 				ctx.addIssue({