Next.js 파비콘 설정: SVG에서 favicon.ico 생성하기

기본 출시라면 favicon.ico 하나만으로도 시작할 수 있습니다. 하지만 브라우저 탭, iOS 홈 화면, PWA 설치, Google 검색 결과까지 안정적으로 보이게 하려면 아이콘 세트를 제대로 갖추는 편이 좋습니다.

이 가이드는 실무적인 순서로 진행합니다. 필요한 아이콘 자산을 정하고, SVG에서 생성하고, 마지막으로 Next.js에 연결합니다.

실제로 필요한 아이콘 파일

실무 기준 최소 구성은 다음과 같습니다.

favicon.ico (호환성용 기본 아이콘)
icon.svg 또는 icon.png (최신 브라우저용)
apple-icon.png (iOS 홈 화면용)
manifest (PWA 메타데이터)
icon-192.png (manifest 규격)
icon-512.png (manifest 규격)

실전 워크플로: SVG에서 파비콘 세트까지

1. 작은 크기에서도 또렷한 SVG 원본부터 준비

파비콘은 보통 16x16, 32x32로 렌더링됩니다. 원본도 그에 맞게 단순하고 선명해야 합니다.

핵심 도형만 남기고 작은 디테일은 줄입니다.
대비를 충분히 확보합니다.
지나치게 얇은 선은 피합니다.

SVG Viewer에서 먼저 미리보기로 확인할 수 있습니다.

2. `favicon.ico` 생성

SVG to ICO를 사용합니다.

SVG 업로드
자주 쓰는 크기 선택 (16/32/48/64)
.ico 단일 파일로 내보내기

이 단계가 SVG 도구 사이트를 쓰는 핵심 이유입니다. SVG에서 파비콘으로 빠르게 변환할 수 있습니다.

3. `icon-192.png`, `icon-512.png` 생성

SVG to PNG로 다음 파일을 내보냅니다.

icon-192.png
icon-512.png

필요하다면 apple-icon.png도 따로 내보냅니다. 일반적으로 180x180 크기를 많이 사용합니다.

4. 선택 사항: 배포 전 최적화

더 가볍고 정돈된 파일이 필요하면 SVG Optimizer나 SVG Minify로 원본을 정리한 뒤 배포합니다.

Next.js App Router 연결 예시

권장 구조는 다음과 같습니다.

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

app/manifest.ts 예시:

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

출시 전 Google 파비콘 체크 항목

이 부분은 카피가 아니라 구현 검증입니다.

https://your-domain.com/favicon.ico가 200을 반환하는지
아이콘 경로가 robots.txt에 막혀 있지 않은지
파비콘이 정사각형이고 최소 8x8 이상인지
가능하면 48의 배수 크기를 포함하는지
홈 HTML에 아이콘 선언(rel="icon")이 있는지

이 조건이 맞으면 Google 검색 파비콘 갱신은 보통 재크롤 이후 반영됩니다.

이 프로젝트처럼 TanStack Start를 쓴다면

같은 자산을 사용하고 루트 <head>에 링크를 선언하면 됩니다.

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

FAQ

`favicon.ico` 하나만 있으면 충분한가요?

기본 출시는 가능하지만, 모든 플랫폼을 커버하기에는 부족할 수 있습니다.

Google이 아직 예전 파비콘을 보여 주는 이유는 뭔가요?

대부분 크롤링 또는 캐시 지연입니다. 먼저 URL 접근 가능 여부를 확인하고, 그다음 재크롤을 기다리면 됩니다.

`icon.svg`와 `favicon.ico` 중 무엇을 써야 하나요?

보통 둘 다 유지합니다. .ico는 호환성용, svg/png는 최신 환경용입니다.

Next.js 파비콘 설정: SVG에서 favicon.ico 생성하기