Next.js 파비콘: 최신 앱 라우터 가이드

새로운 Next.js 프로젝트를 시작하고 public 폴더에 favicon.ico 파일을 넣었는데... 아무것도 나타나지 않나요? 혹은 더 나쁘게, 로컬에서는 잘 되는데 배포 환경에서는 깨지나요? 대체 왜 그럴까요?

이런 경험이 있다면, 오래된 pages 라우터와 현대적인 앱 라우터(App Router)의 차이점에 부딪혔을 가능성이 높습니다. 좋은 소식은, 일단 규칙을 알고 나면 새로운 방식이 훨씬 더 간단하고 강력하다는 것입니다.

공식적인 방법: 파일 기반 메타데이터

layout.tsx에 수동으로 <link> 태그를 추가하는 것은 잊어버리세요. Next.js 앱 라우터는 특별한 파일 기반 시스템을 사용합니다. 특정 이름의 아이콘 파일들을 app 디렉토리에 넣기만 하면, Next.js가 필요한 HTML head 태그를 자동으로 생성해 줍니다.

이것이 제가 추천하는 접근 방식입니다. 더 깔끔하고, 오류 발생 가능성이 적으며, 프레임워크에 내장된 최적화 기능을 활용할 수 있습니다.

단계별 파비콘 추가하기

5분 안에 이 작업을 끝내봅시다. 앱 라우터를 사용하는 Next.js 프로젝트 외에는 다른 준비물은 필요 없습니다.

1단계: 아이콘 파일 준비하기

폭넓은 호환성을 위해 몇 가지 핵심 파일이 필요합니다. 직접 만들 수도 있지만, 생성기를 사용하면 정확한 크기와 형식으로 만들 수 있습니다. (뻔뻔한 광고지만, 저희 무료 파비콘 생성기가 이 작업을 완벽하게 처리해 드립니다).

2단계: `app` 디렉토리의 루트에 아이콘 배치하기

이것이 가장 중요한 단계입니다. 생성된 아이콘들을 /app 폴더로 직접 옮기세요. /public 폴더에 넣지 마세요.

프로젝트 구조는 다음과 같아야 합니다:

app/
├── layout.tsx
├── page.tsx
├── favicon.ico       <-- 레거시 브라우저용
├── icon.svg          <-- 최신 브라우저용 (권장)
└── apple-icon.png    <-- iOS 홈 화면용
public/
└── ... (기타 정적 자산)

Next.js는 이 파일들을 자동으로 감지하고 사이트의 <head>에 해당하는 <link> 태그를 생성합니다.

3단계: 오래되거나 수동으로 추가한 선언 제거하기

만약 public 폴더에 오래된 favicon.ico 파일이 있다면, 삭제하세요. /app에 있는 파일이 우선 적용되지만, 혼동을 피하는 것이 가장 좋습니다.

또한, 루트 layout.tsx 파일을 확인하고 수동으로 추가한 <link rel="icon" ...> 태그를 제거하세요. 파일 기반 방식을 사용하면 이 태그들은 불필요해집니다.

4단계: 결과 확인하기

개발 서버를 실행하고(npm run dev) 페이지의 소스 코드를 검사해 보세요. Next.js가 다음과 같이 태그를 생성한 것을 볼 수 있을 것입니다:

<head>
  ...
  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
  <link rel="apple-touch-icon" href="/apple-icon.png" type="image/png" sizes="any">
  ...
</head>

이 태그들이 보인다면 제대로 작동하고 있다는 뜻입니다. 프레임워크가 모든 것을 처리해 준 것입니다.

실제 사례: GitHub는 어떻게 할까?

전문가들은 이 문제를 어떻게 다루는지 궁금하신가요? GitHub를 살펴보세요. 그들은 favicon.ico, 다양한 기기를 위한 여러 크기의 PNG, 그리고 Safari 고정 탭 아이콘을 위한 특별한 단색 SVG를 제공합니다. Next.js의 파일 기반 접근 방식은 바로 이런 견고한 멀티 디바이스 지원을 자동으로 구축하도록 설계되어, 여러분이 그 많은 <link> 태그를 직접 작성하는 수고를 덜어줍니다.

피해야 할 흔한 실수들

아이콘이 나타나지 않는다면, 보통 다음 세 가지 중 하나가 원인입니다.

1. `public` 폴더의 함정

다시 말하지만, 파비콘과 같은 메타데이터 파일의 경우, 최신 Next.js에서는 app 디렉토리가 올바른 위치입니다. public 폴더는 여전히 일반적인 정적 자산에 사용할 수 있지만, /app에 위치한 아이콘은 특별한 의미를 가지며 우선순위가 더 높습니다.

2. 공격적인 브라우저 캐싱

코드는 완벽한데 여전히 오래된 아이콘(또는 아이콘 없음)이 보인다면, 이것은 거의 항상 브라우저 탓입니다. 브라우저는 파비콘을 매우 공격적으로 캐시합니다.

단순한 페이지 새로고침으로는 충분하지 않을 때가 많습니다. 강력 새로고침을 하거나 브라우저 캐시를 지워야 합니다. 만약 문제가 해결되지 않는다면, 파비콘 캐시를 강제로 지우는 방법에 대한 상세 가이드를 참고하세요.

3. 잘못된 파일 이름

favicon.ico, icon.png, icon.svg, apple-icon.png라는 이름은 임의로 정해진 것이 아닙니다. 이것들은 Next.js가 특별히 찾는 규칙입니다. my-icon.svg와 같은 오타는 자동으로 인식되지 않습니다.

이것으로 끝입니다. 파일 기반 규칙을 따름으로써, 여러분은 프레임워크에 맞서는 것이 아니라 함께 일하게 됩니다. 최적화되고 정확한 HTML을 무료로 얻고, 프로젝트는 깔끔하게 유지됩니다. 더 이상 브라우저 탭에 브랜드를 표시하기 위해 <head> 태그와 씨름할 필요가 없습니다.