Next.js App Router에 파비콘을 빠르게 추가하는 방법

App Router를 사용해 만든 Next.js 사이트를 열었을 때 기본 브라우저 탭 아이콘만 보인다면, 파비콘이 누락된 원인은 메타데이터 설정이 불완전하기 때문일 가능성이 높습니다.

전제 조건

• Next.js 13 이상 버전이며 app 디렉터리를 사용하는 프로젝트.
• 로컬에 Node.js 18 이상이 설치되어 있어야 합니다.
• Mzu favicondl(링크)으로 생성한 아이콘 세트(SVG, PNG, ICO)가 필요합니다. 적절한 크기를 선택하려면 favicon 사이즈 가이드를 참고하십시오.

단계별 구현

1. 아이콘 파일을 생성합니다. Mzu favicondl을 사용해 최소 세 개의 파일을 만듭니다:
   • favicon.svg – 권장되는 확장 가능한 형식.
   • favicon.ico – /favicon.ico를 여전히 요청하는 구형 브라우저용 대체 파일.
   • apple-touch-icon.png – 선택적인 Apple Touch 아이콘.
   파일을 프로젝트의 public 폴더에 저장합니다.
2. app/layout.tsx에서 메타데이터를 내보냅니다. App Router는 레이아웃 파일에서 metadata export를 읽습니다. 방금 배치한 파일을 참조하는 icons 객체를 추가합니다.

   <pre><code>export const metadata = {
     title: 'My Next.js Site',
     icons: {
       icon: '/favicon.ico', // legacy fallback
       shortcut: '/favicon.ico', // shortcut icon for older browsers
       apple: '/apple-touch-icon.png', // Apple Touch icon (optional)
       other: [
         { rel: 'icon', url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' }
       ]
     }
   };
   </code></pre>

   이는 Next.js에서 문서화한 파일 기반 메타데이터 방식과 일치합니다.
3. 생성된 <head> 출력을 확인합니다. npm run dev를 실행하고 페이지 소스를 열면 다음과 유사한 link 태그가 표시됩니다:

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

   태그는 자동으로 생성되므로 직접 작성할 필요가 없습니다.
4. 다양한 브라우저에서 테스트합니다. Chrome, Safari, Firefox에서 사이트를 열어보십시오. 고해상도 화면에서는 SVG 아이콘이 표시되고, 구형 버전에서는 ICO 파일이 대체됩니다.
   • Chrome은 type='image/svg+xml'가 지정된 경우 SVG를 우선 사용합니다.
   • Safari는 홈 화면 바로가기를 위해 Apple Touch 아이콘을 사용합니다.
   • Firefox는 rel='icon' 항목을 인식하며, SVG가 없을 경우 ICO 파일을 캐시합니다.
5. 배포합니다. 변경 사항을 호스팅 제공업체(Vercel, Netlify 등)에 푸시합니다. public 폴더는 정적으로 제공되므로 첫 빌드가 완료된 직후 아이콘을 사용할 수 있습니다.

자주 발생하는 실수

• public 폴더 경로 누락. 아이콘이 public 외부에 있으면 생성된 URL이 존재하지 않는 위치를 가리키게 되며, 브라우저는 404 오류를 기록합니다.
• rel='shortcut icon'만 사용. 최신 브라우저는 rel='icon' 사양(HTML spec)을 따릅니다. 레거시 속성만 의존하면 SVG가 무시될 수 있습니다.
• 캐시로 인한 오래된 아이콘. 브라우저는 favicon.ico를 적극적으로 캐시합니다. 쿼리 문자열(예: /favicon.ico?v=2)을 추가하거나 빌드 시 콘텐츠 해싱을 활성화해 업데이트를 강제하십시오.
• 잘못된 MIME 타입. .svg는 image/svg+xml, .ico는 image/x-icon으로 제공해야 합니다. 서버 설정이 잘못되면 브라우저가 파일을 거부합니다.

결론

App Router가 단일 metadata export를 기반으로 <link> 태그를 자동 생성하도록 하면 파비콘 설정을 선언적이고 향후 확장 가능하게 유지할 수 있습니다. 위 단계는 아이콘 생성, 위치 지정, 메타데이터 내보내기, 검증, 배포까지 모두 포함하므로 빈 탭 아이콘을 몇 분 안에 완성된 브랜드 아이덴티티로 전환할 수 있습니다.

SVG와 ICO 파일을 빠르게 만들고 싶으신가요? Mzu favicondl을 사용해 보세요 – App Router 방식에 필요한 정확한 파일 세트를 생성합니다.

문서화된 요구 사항 확인

Next.js는 metadata 파일 규약에서 파비콘 및 앱 아이콘에 대해 문서화하고 있습니다.