React용 파비콘
React는 <head>를 렌더링하지 않습니다. 파비콘은 index.html에 있습니다. favicon.ico를 /public에 놓고 링크하세요. 최신 설정에는 SVG 및 PNG 변형도 제공됩니다.
Vite와 CRA는 모두 루트에서 /public을 제공하므로 /favicon.ico가 기본 검색 경로입니다. 번들러 구성이 필요하지 않습니다.
높은 DPI 디스플레이 및 PWA 설치 프롬프트의 경우 180×180 apple-touch-icon 및 512×512 PNG를 /public에 추가하고 index.html에 연결합니다.
작동 방식
- 1
여러 크기의 .ico 생성
512×512 소스와 함께 파비콘 생성기를 사용하세요.
- 2
/public에 접속하세요.
거기에 favicon.ico, favicon.svg 및 apple-touch-icon.png를 배치합니다.
- 3
index.html의 링크
<link rel="icon" href="/favicon.ico"> 및 <link rel="icon" type="image/svg+xml" href="/favicon.svg">를 추가합니다.
지금 사용해 보기
React 지원 파비콘 구축
파비콘 생성기자주 묻는 질문
Vite React 앱에서 파비콘은 어디에 있나요?+
/public/favicon.ico (및 벡터 변형을 원하는 경우 /public/favicon.svg).
다크 모드 파비콘을 어떻게 추가하나요?+
<style>@media (prefers-color-scheme: dark) {...}</style> 블록과 함께 단일 SVG를 사용하세요.
내 파비콘이 개발팀에 로드되지 않는 이유는 무엇입니까?+
탭을 강제로 새로 고칩니다. 브라우저는 다시 로드하는 동안에도 원본별로 /favicon.ico를 캐시합니다.