Implement detection of image/x-icon for next/image component

[kaguya3222]

Describe the feature you'd like to request

Currently, Next.js tries to load icon with fetch request and then it determines it's content-type by following steps:

1. Tries to analyze response buffer and infer content-type. Currently 'analyzer' supports following content-types: image/avif, image/webp, image/png, image/jpeg, image/gif, image/svg+xml.
2. Tries to get content type from request headers, like `response.headers.get('Content-Type').

So, I think it would be great if Next.js could infer image/x-icon content type from response buffer.

Describe the solution you'd like

I want Next.js to automatically detect image/x-icon content type of loaded image, even if response doesn't have correct Content-Type header.

Describe alternatives you've considered

I think the only alternative is to have a correct response Content-Type header from URL where the loaded image is located.
But, I think it will be more convenient if Next.js can automatically detect it, like it does for png, avif, webp and etc

[styfle]

The image/x-icon format is not currently optimized, its just a pass-through as seen here:

next.js/test/integration/image-optimizer/test/util.ts

Lines 269 to 289 in fe762d3

	it('should maintain ico format', async () => {
	const query = { w: ctx.w, q: 90, url: `/test.ico` }
	const opts = { headers: { accept: 'image/webp' } }
	const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
	expect(res.status).toBe(200)
	expect(res.headers.get('Content-Type')).toContain('image/x-icon')
	expect(res.headers.get('Cache-Control')).toBe(
	`public, max-age=${isDev ? 0 : minimumCacheTTL}, must-revalidate`
	)
	expect(res.headers.get('Vary')).toMatch(/^Accept(,|$)/)
	expect(res.headers.get('etag')).toBeTruthy()
	expect(res.headers.get('Content-Disposition')).toBe(
	`inline; filename="test.ico"`
	)
	const actual = await res.text()
	const expected = await fs.readFile(
	join(ctx.appDir, 'public', 'test.ico'),
	'utf8'
	)
	expect(actual).toMatch(expected)
	})

When there is no upstream content-type header, the type is autodetected here:

next.js/packages/next/src/server/image-optimizer.ts

Lines 112 to 144 in aeef38e

	export function detectContentType(buffer: Buffer) {
	if ([0xff, 0xd8, 0xff].every((b, i) => buffer[i] === b)) {
	return JPEG
	}
	if (
	[0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a].every(
	(b, i) => buffer[i] === b
	)
	) {
	return PNG
	}
	if ([0x47, 0x49, 0x46, 0x38].every((b, i) => buffer[i] === b)) {
	return GIF
	}
	if (
	[0x52, 0x49, 0x46, 0x46, 0, 0, 0, 0, 0x57, 0x45, 0x42, 0x50].every(
	(b, i) => !b || buffer[i] === b
	)
	) {
	return WEBP
	}
	if ([0x3c, 0x3f, 0x78, 0x6d, 0x6c].every((b, i) => buffer[i] === b)) {
	return SVG
	}
	if (
	[0, 0, 0, 0, 0x66, 0x74, 0x79, 0x70, 0x61, 0x76, 0x69, 0x66].every(
	(b, i) => !b || buffer[i] === b
	)
	) {
	return AVIF
	}
	return null
	}

Feel free to submit a PR with a test to check for the magic number of ico 👍

[kaguya3222]

@styfle Thank you for your feedback! I will work on this