Favicon for Next.js
Next.js 14+ App Router treats /app/icon.png and /app/favicon.ico as conventions — drop them in and Next emits the right tags automatically.
Place favicon.ico inside /app and Next will serve it at /favicon.ico and inject the link tag.
For multi-size or themed icons, use the file conventions: icon.png, icon.svg, apple-icon.png inside /app. Next generates the <link> tags from the file metadata.
작동 방식
- 1
Generate favicon.ico
Multi-size 16/32/48/64 from a 512×512 source.
- 2
Place in /app
/app/favicon.ico is auto-served. Add icon.png for HD.
- 3
Verify
Open /favicon.ico in your browser — Next serves it without any config.
지금 사용해 보기
Generate a Next.js-ready favicon
파비콘 생성기자주 묻는 질문
Where do icons go in Next.js App Router?+
Inside the /app directory. The file name (icon, apple-icon, favicon) determines the role.
What about the Pages Router?+
Drop favicon.ico into /public and link it from _document.tsx.
Do I still need a multi-size .ico?+
Recommended for legacy browser support, especially Edge and IE-mode shortcuts.