fix: 구글 검색결과 파비콘 잘림 수정

여백 추가된 favicon.svg 기반으로 PNG/ICO 파비콘 재생성.
로고를 캔버스 중앙 영역에 배치해 구글 원형 마스크에도 안 잘리도록 함.
- sharp/png-to-ico 기반 생성 스크립트 추가 (npm run favicon)
- SVG 파비콘 링크 추가 (최신 브라우저 우선)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/scripts/gen-favicon.mjs

@@ -0,0 +1,51 @@
+// favicon.svg → 검색엔진/브라우저용 PNG·ICO 파비콘 일괄 생성 스크립트
+// 사용법: node scripts/gen-favicon.mjs
+import sharp from 'sharp'
+import pngToIco from 'png-to-ico'
+import { readFile, writeFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const publicDir = resolve(__dirname, '../public')
+const svgPath = resolve(publicDir, 'favicon.svg')
+
+// 흰 배경으로 평탄화 — 투명 영역이 iOS/검색결과에서 검게 보이는 문제 방지
+const WHITE = { r: 255, g: 255, b: 255, alpha: 1 }
+
+// 주어진 한 변 길이로 PNG 버퍼 생성
+async function render(svg, size) {
+  return sharp(svg, { density: 384 })
+    .resize(size, size, { fit: 'contain', background: WHITE })
+    .flatten({ background: WHITE })
+    .png()
+    .toBuffer()
+}
+
+async function main() {
+  const svg = await readFile(svgPath)
+
+  // 개별 PNG 파비콘 생성
+  const targets = [
+    { name: 'favicon-16x16.png', size: 16 },
+    { name: 'favicon-32x32.png', size: 32 },
+    { name: 'apple-touch-icon.png', size: 180 },
+  ]
+  for (const { name, size } of targets) {
+    const buf = await render(svg, size)
+    await writeFile(resolve(publicDir, name), buf)
+    console.log(`생성: ${name} (${size}x${size})`)
+  }
+
+  // favicon.ico — 16/32/48 멀티 사이즈 포함
+  const icoSizes = [16, 32, 48]
+  const icoPngs = await Promise.all(icoSizes.map((s) => render(svg, s)))
+  const ico = await pngToIco(icoPngs)
+  await writeFile(resolve(publicDir, 'favicon.ico'), ico)
+  console.log(`생성: favicon.ico (${icoSizes.join('/')})`)
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})