Nuxt용 파비콘
Nuxt는 사이트 루트에서 /public의 정적 파일을 제공하므로 /public/favicon.ico는 자동으로 /favicon.ico가 됩니다. 여러 크기 또는 SVG 아이콘의 경우 app.vue의 nuxt.config.ts 또는 useHead()를 통해 링크 태그를 추가하세요.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Favicon Generator로 파비콘 팩을 생성하세요. 512×512 소스에서 favicon.ico, favicon.svg 및 apple-touch-icon.png를 내보냅니다. Nuxt 프로젝트의 /public 폴더에 넣으세요.
Nuxt 3는 추가 구성 없이 도메인 루트에서 /public의 모든 것을 제공합니다. 브라우저는 기본적으로 /favicon.ico를 요청하므로 여기에 파일을 배치하는 것이 가장 일반적인 경우입니다.
모든 아이콘 변형을 명시적으로 제어하려면 app.head.link 아래 nuxt.config.ts에 링크 태그를 추가하거나 app.vue에서 useHead({ link: [...] })를 호출하세요. 두 접근 방식 모두 모든 페이지의 <head>에 태그를 삽입합니다.
배포 후 비공개 창에서 프로덕션 URL을 열고 Favicon Checker를 실행하여 /favicon.ico를 확인하고 <link rel="icon"> 경로가 200을 반환하는지 확인하세요. 캐시된 개발 아이콘은 배포 후 Nuxt 파비콘이 표시되지 않는 일반적인 이유입니다.
탭 아이콘은 작동하지만 Google Search에 여전히 빈 파비콘이 표시되는 경우 라이브 홈페이지가 최소 48×48 크기의 사각형 아이콘에 연결되어 있는지 확인하세요. 크롤링 및 크기 규칙은 Google 파비콘 요구사항 가이드를 참조하세요.
Nuxt는 여러 크기의 .ico 파일을 자동 생성하지 않으므로 사용자가 제공해야 합니다. PWA 설치 프롬프트 및 높은 DPI 탭에 대해 app.head에 링크된 PNG 폴백을 사용하세요.
작동 방식
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
/public에 추가
favicon.ico(및 선택적 favicon.svg, apple-touch-icon.png)를 Nuxt /public 폴더에 복사합니다.
- 3
구성 및 확인
필요한 경우 nuxt.config.ts에 app.head.link 항목을 추가하고 배포한 다음 실제 URL에서 Favicon Checker를 실행하세요.
지금 사용해 보기
Generate a Nuxt-ready favicon
파비콘 생성기자주 묻는 질문
Nuxt 3에 파비콘을 어떻게 추가하나요?+
/public에 favicon.ico를 배치한 다음 선택적으로 app.head.link 아래의 nuxt.config.ts에 또는 app.vue의 useHead()를 통해 <link rel="icon"> 태그를 추가하세요.
Nuxt 프로젝트에서 파비콘은 어디에 있나요?+
/public 디렉토리. 파일은 도메인 루트에서 제공됩니다. /public/favicon.ico는 /favicon.ico에서 사용할 수 있습니다.
내 Nuxt 파비콘이 표시되지 않는 이유는 무엇입니까?+
일반적인 원인: /public에 파일이 없음, app.head에 잘못된 경로, 개발자의 브라우저 캐시 또는 배포된 URL 대신 localhost 확인. 시크릿 창에서 테스트하세요.
파비콘에 nuxt.config.ts 또는 useHead()를 사용해야 합니까?+
둘 중 하나가 작동합니다. nuxt.config.ts는 정적 사이트 전체 아이콘에 가장 적합합니다. 아이콘이 런타임 상태 또는 경로별 로직에 따라 달라지는 경우 app.vue의 useHead()입니다.
Nuxt에서 SVG 파비콘을 사용할 수 있나요?+
예 — /public에 favicon.svg를 배치하고 app.head.link에 { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }를 추가합니다.