Next.js용 파비콘
Next.js 14+ 앱 라우터는 /app/icon.png 및 /app/favicon.ico를 규칙으로 처리합니다. 이를 드롭하면 Next가 자동으로 올바른 태그를 내보냅니다.
/app 안에 favicon.ico를 배치하면 Next가 이를 /favicon.ico에 제공하고 링크 태그를 삽입합니다.
여러 크기 또는 테마 아이콘의 경우 /app 내에서 icon.png, icon.svg, apple-icon.png 파일 규칙을 사용합니다. 다음으로 파일 메타데이터에서 <link> 태그를 생성합니다.
작동 방식
- 1
favicon.ico 생성
512×512 소스의 다중 크기 16/32/48/64.
- 2
/app에 배치
/app/favicon.ico가 자동으로 제공됩니다. HD용 icon.png를 추가하세요.
- 3
확인하다
브라우저에서 /favicon.ico를 엽니다. Next는 구성 없이 이를 제공합니다.
지금 사용해 보기
Next.js 지원 파비콘 생성
파비콘 생성기자주 묻는 질문
Next.js 앱 라우터에서 아이콘은 어디에 있나요?+
/app 디렉토리 내부. 파일 이름(icon, apple-icon, favicon)에 따라 역할이 결정됩니다.
페이지 라우터는 어떻습니까?+
favicon.ico를 /public에 놓고 _document.tsx에서 연결합니다.
여전히 여러 크기의 .ico가 필요합니까?+
레거시 브라우저 지원, 특히 Edge 및 IE 모드 바로가기에 권장됩니다.