파비콘 설정
5개의 파일과 5개의 태그로 모든 최신 브라우저, iOS 홈 화면 및 Android 설치를 지원합니다. 더 많은 크기(mstile-*, browserconfig.xml, 57/72/114px 애플 아이콘, mask-icon)는 레거시입니다. 생략하세요.
1. 세트
| 파일 | 크기 | 사용처 |
|---|---|---|
favicon.svg | 벡터 | 최신 브라우저 탭. 선명하게 표시되며 다크 모드 전환이 가능합니다. |
favicon-96x96.png | 96×96 | SVG 파비콘을 지원하지 않는 브라우저 및 Google 검색 결과. |
favicon.ico | 16, 32, 48 (하나의 파일) | HTML을 읽지 않고 /favicon.ico를 직접 요청하는 레거시 브라우저 및 도구. |
apple-touch-icon.png | 180×180, 불투명 | iOS 및 iPadOS 홈 화면. |
web-app-manifest-192x192.png, web-app-manifest-512x512.png | 192, 512 | Android 홈 화면, PWA 설치, 스플래시 화면. |
site.webmanifest | — | Android가 위의 두 PNG를 가리키도록 합니다. |
2. 파일 가져오기
RealFaviconGenerator 패키지에서. 다운로드 URL 세트를 제공합니다. 각 파일을 PUBLIC_FOLDER(3단계 참조)에 정확한 이름으로 다운로드하세요:
base=https://realfavicongenerator.net/files/<package-id>
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
curl -fsSL "$base/$f" -o "PUBLIC_FOLDER/$f" || echo "실패: $f"
done
다운로드가 실패하면 중단하고 보고하세요. 불완전한 세트를 배포하지 마세요. 생성기 버그는 다음에서 보고하세요: https://github.com/RealFaviconGenerator/realfavicongenerator/issues/new?template=ai_prompt_bug_report.yml
하나의 소스 SVG에서 (rsvg-convert와 ImageMagick 필요, 또는 생성기 사용):
cp logo.svg PUBLIC_FOLDER/favicon.svg
rsvg-convert -w 96 -h 96 logo.svg -o PUBLIC_FOLDER/favicon-96x96.png
rsvg-convert -w 192 -h 192 logo.svg -o PUBLIC_FOLDER/web-app-manifest-192x192.png
rsvg-convert -w 512 -h 512 logo.svg -o PUBLIC_FOLDER/web-app-manifest-512x512.png
# iOS는 투명도를 검은색으로 채웁니다. 브랜드 배경에 평탄화하고 약 10% 여백을 추가합니다.
rsvg-convert -w 144 -h 144 logo.svg | magick - -background '#ffffff' -gravity center -extent 180x180 -flatten PUBLIC_FOLDER/apple-touch-icon.png
magick -background none logo.svg -define icon:auto-resize=48,32,16 PUBLIC_FOLDER/favicon.ico
3. PUBLIC_FOLDER 찾기
사이트 루트에서 제공되는 폴더입니다. 따라서 PUBLIC_FOLDER/favicon.ico는 /favicon.ico에서 로드됩니다.
| 스택 | 폴더 |
|---|---|
| Vite, Next.js, Create React App, Astro, Remix, Nuxt 3 | public/ |
| SvelteKit | static/ |
| Angular | public/ (v17+) 또는 angular.json assets에 파일이 나열된 src/ |
| Hugo, Jekyll, Eleventy | static/, 사이트 루트 또는 passthrough-copy 폴더 |
| 일반 HTML | index.html 옆 |
Next.js App Router: 기본 app/favicon.ico를 삭제하세요. 이 파일이 public/favicon.ico보다 우선하며 일반적으로 Next.js 로고입니다.
4. 마크업을 한 번 추가
루트 <html> 태그를 렌더링하는 하나의 파일의 <head>에 다음을 넣으세요. 페이지별로 절대 추가하지 마세요.
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
| 스택 | 루트 파일 |
|---|---|
| Vite, CRA, 일반 HTML | index.html |
| Next.js App Router | app/layout.tsx, metadata export를 통해 (아래 참조), raw 태그가 아님 |
| Next.js Pages Router | pages/_document.tsx의 <Head> 내부 |
| Astro | 기본 레이아웃 (예: src/layouts/Layout.astro) |
| SvelteKit | src/app.html |
| Remix / React Router 7 | app/root.tsx의 links export |
| Nuxt | nuxt.config.ts의 app.head.link |
Next.js App Router 동등 코드:
export const metadata = {
icons: {
icon: [
{ url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
{ url: "/favicon.svg", type: "image/svg+xml" },
],
shortcut: "/favicon.ico",
apple: { url: "/apple-touch-icon.png", sizes: "180x180" },
},
manifest: "/site.webmanifest",
};
마크업을 추가하기 전에 프로젝트에서 기존의 rel="icon", apple-touch-icon 및 manifest 태그를 검색하세요. 이를 교체하고 두 번째 세트를 추가하지 마세요. 사이트가 하위 경로(base / basePath)에서 제공되는 경우 모든 href에 접두사를 붙이세요.
5. 최적화
- SVG 다크 모드. 어두운 로고는 어두운 탭 바에서 사라집니다. SVG 내부에 미디어 쿼리를 추가하세요:
<style>path{fill:#111}@media (prefers-color-scheme:dark){path{fill:#fff}}</style> - 작은 크기. 16px에서는 미세한 디테일과 텍스트를 생략하세요. 워드마크 대신 로고마크를 사용하세요.
- SVG 용량.
npx svgo favicon.svg를 실행하고 파일을 약 2KB 미만으로 유지하세요. - 매니페스트.
name,short_name,theme_color및background_color를 입력하세요. 512 아이콘을 마스크 가능하게 만드세요: 마크를 중앙 80% 안전 영역 내에 유지하고, 단색 배경을 사용하며,"purpose": "maskable"로 설정하세요. 마크가 안전 영역에 맞지 않으면 대신 별도의 마스크 가능 아이콘을 추가하세요.{ "name": "My App", "short_name": "App", "icons": [ { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" } - 캐싱. 브라우저는 파비콘을 강하게 캐시합니다. 아이콘을 교체할 때는 파일 이름을 바꾸거나 모든
href와 매니페스트src값에?v=2를 추가하세요.
6. 확인
- 모든 파일이 올바른 유형과 함께 200을 반환합니다. 개발 서버에 대해 다음을 실행하세요:
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \ web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do printf '%s ' "$f"; curl -s -o /dev/null -w '%{http_code} %{content_type}\n' "http://localhost:PORT/$f" done - 렌더링된 HTML에는 정확히 하나의 태그 세트가 포함되어 있습니다:
curl -s http://localhost:PORT/ | grep -cE 'rel="(icon|shortcut icon|apple-touch-icon|manifest)"'는5를 출력합니다. - DevTools에서 Application → Manifest를 열면 오류가 없고 두 아이콘이 모두 렌더링되는지 확인합니다.
- 라이트 모드와 다크 모드에서 하드 새로고침된 탭을 열고 두 모드 모두 아이콘이 보이는지 확인합니다.
- 배포된 URL에서 RealFaviconGenerator 체커(https://realfavicongenerator.net/favicon-checker)를 실행합니다.