fix(website): make the favicon larger and legible on light tabs (#5)

The favicon now uses shorter speed lines, so the artwork is 86 instead of
76 of 128 pixels tall. An SVG favicon shows the dark logo ink on light
browser themes and the white art on dark ones, with the PNG as fallback.

Amp-Thread-ID: https://ampcode.com/threads/T-01a18b8a-340f-717d-9ca7-6dcf564a065a

Co-authored-by: Amp <amp@ampcode.com>

Author: kvlonge

website/astro.config.mjs

@@ -16,8 +16,10 @@ export default defineConfig({
 				dark: './src/assets/logo-dark.png',
 				replacesTitle: true,
 			},
-			favicon: '/favicon.png',
+			favicon: '/favicon.svg',
 			head: [
+				// PNG fallback for browsers without SVG favicons; the SVG favicon uses dark ink on light tabs and white on dark.
+				{ tag: 'link', attrs: { rel: 'icon', type: 'image/png', sizes: '128x128', href: '/favicon.png' } },
 				{ tag: 'meta', attrs: { property: 'og:image', content: 'https://sqlclean.io/assets/og-sqlclean-docs.png' } },
 				{ tag: 'meta', attrs: { property: 'og:image:width', content: '1200' } },
 				{ tag: 'meta', attrs: { property: 'og:image:height', content: '630' } },

website/public/assets/icon.png

@@ -18,7 +18,8 @@
 		<meta property="og:image:alt" content="SQLClean: fast SQL linting, safe fixes and one canonical format." />
 		<meta name="twitter:card" content="summary_large_image" />
 		<meta name="twitter:image" content="https://sqlclean.io/assets/og-sqlclean.png" />
-		<link rel="icon" type="image/png" href="assets/icon.png" />
+		<link rel="icon" type="image/png" sizes="128x128" href="assets/icon.png" />
+		<link rel="icon" type="image/svg+xml" href="favicon.svg" />
 		<link rel="preload" href="/fonts/inter-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin />
 		<link rel="stylesheet" href="styles.css" />
 		<script>