HTML에 파비콘을 추가하는 방법

세 개의 태그가 대부분의 사이트를 포괄합니다. 5개의 태그는 PWA급 설정을 제공합니다. 이 튜토리얼에서는 각 속성을 설명하고, 일반 스택에 대한 복사-붙여넣기 스니펫을 보여주고, FAQ에 답변하고, 아이콘이 멈춘 것처럼 보이게 만드는 캐싱 문제를 해결합니다.

2026. 2. 2. 6 분 분량

최소 태그

가장 작은 유효한 선언은 <head>의 한 줄입니다.

브라우저는 rel="icon"을 탭 표시를 위해 해당 URL을 가져오는 힌트로 처리합니다. /로 시작하는 루트 상대 경로는 현재 페이지 경로에 관계없이 유지됩니다.

이 태그를 사용하더라도 많은 클라이언트는 여전히 /favicon.ico를 자동으로 검색합니다. 암시적 요청을 위해 사이트 루트에 파일을 보관합니다.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

모던 추천 세트

데스크탑, iOS 및 다크 모드 탭에서 선명한 렌더링을 위해서는 다음을 사용하십시오.

완전성보다는 순서가 중요합니다. 브라우저는 가능한 경우 가장 잘 지원되는 유형인 SVG를 선택하고, 그렇지 않은 경우 일치하는 PNG 또는 ICO 프레임을 선택합니다.

MIME 스니핑이 파일의 레이블을 잘못 지정하지 않도록 SVG 줄에 type="image/svg+xml"을 추가합니다.

PWA 설치 프롬프트

매니페스트를 연결하세요: <link rel="manifest" href="/site.webmanifest">.

site.webmanifest 내에서 src, 크기, 유형 및 목적으로 아이콘을 선언합니다. 최소 유용한 항목은 192×192 및 512×512 PNG 파일입니다.

선택적 테마 개선: <meta name="theme-color" content="#0f172a">는 설치 흐름 중에 Android 상태 표시줄을 브랜드에 맞춰 정렬합니다.

복사하여 붙여넣기 예시

일반 HTML 사이트 — <head> 안에 붙여넣기:

Next.js 앱 라우터 - 메타데이터 또는 수동 <head> 블록 내부의 app/layout.tsx에 동일한 줄을 추가합니다. 파일은 /public에 있습니다.

Create React App — 아이콘을 /public에 배치하고 public/index.html을 편집합니다. CRA는 프로덕션 빌드의 도메인 루트에서 /public을 제공합니다.

각 속성 이해

rel="icon"은 favicon 후보를 표시합니다. rel="apple-touch-icon"은 iOS 전용 홈 화면 아이콘입니다. rel="manifest"는 PWA 메타데이터가 있는 JSON을 가리킵니다.

크기는 PNG가 나타내는 해상도를 브라우저에 알려줍니다. 여러 크기를 명시적으로 선언하는 경우 PNG 아이콘에 필요합니다.

href는 프로덕션 환경에서 접근 가능해야 합니다. favicon에 대해 타사 CDN에 대한 핫링크를 피하세요. 브랜드 변경 중에 모든 권한을 원합니다.

자주 묻는 질문

href에서 절대 URL을 사용할 수 있나요? 예, 하지만 루트 상대 /favicon.ico는 스테이징 및 프로덕션 도메인 전체에서 더 간단합니다.

rel="단축 아이콘"과 rel="icon"이 모두 필요합니까? 아니요. rel="icon"이 표준입니다. 바로가기는 더 이상 사용되지 않습니다.

<head>는 정확히 어디에 있나요? <body> 앞의 <html>의 직계 하위 항목입니다. 일부 프레임워크는 레이아웃 구성 요소를 통해 이를 주입합니다.

favicon는 CDN에 있어야 합니까? 가능하지만 마이그레이션 시 모든 <link> URL을 함께 업데이트하세요. 루트 상대 경로는 이러한 문제를 방지합니다.

문제 해결

아이콘은 홈페이지에서는 작동하지만 /blog/slug에서는 작동하지 않습니다. 슬래시 없이 favicon.ico와 같은 상대 href를 사용했습니다. 대신 /favicon.ico를 사용하세요.

Safari는 이전 아이콘을 표시합니다. 웹사이트 데이터를 지우거나 파일 이름을 한 번 바꿉니다. Safari는 HTML보다 긴 favicon를 캐시합니다.

유효한 HTML이지만 네트워크 탭의 404: 파일이 서버 루트에 배포되지 않았거나 케이스가 잘못되었습니다(Linux의 Favicon.ico 대 favicon.ico).

SVG 무시됨: type="image/svg+xml"이 누락되었거나 서버가 잘못된 Content-Type을 보냅니다. nginx 또는 Apache에서 MIME 매핑을 수정합니다.

프레임워크별 배치

Vite / Vue / React SPA: 아이콘을 /public에 넣고 index.html에서 /favicon.ico를 참조합니다. 개발 서버와 프로덕션 빌드는 모두 도메인 루트에서 /public을 제공합니다.

Next.js 앱 라우터: 메타데이터 API를 통해 /app에 아이콘을 추가하거나 /public에 정적 파일을 배치합니다. 두 위치 모두에서 태그가 중복되지 않도록 하세요.

Nuxt: 경로 전반에 걸쳐 중앙 집중식 태그 관리를 위해 nuxt.config.ts에서 /public을 사용하거나 app.head.link를 구성합니다.

SvelteKit: static/ 폴더의 정적 자산은 /에 매핑됩니다. 전체 앱에 대해 app.html <head>를 한 번 업데이트하세요.

Astro: public/ 디렉토리와 레이아웃의 공유 Head 구성 요소를 사용하면 복사-붙여넣기 드리프트 없이 모든 페이지에 동일한 아이콘 태그가 포함됩니다.

WordPress 및 기타 CMS 사용자는 수동 태그가 전혀 필요하지 않을 수 있습니다. 코어가 Site Icon 마크업을 생성하는 경우 WordPress 튜토리얼을 참조하세요.

HTML 설정 확인 중

배포된 HTML가 저장소와 일치하는지 확인하려면 localhost가 아닌 프로덕션의 페이지 소스를 확인하세요. CI 파이프라인은 때때로 환경마다 다른 레이아웃을 삽입합니다.

컬을 사용하여 <link href>에 반환된 각 아이콘 URL을 가져옵니다. Content-Length가 올바른 200 상태는 경로가 단순히 선언된 것이 아니라 실제 경로임을 의미합니다.

W3C 마크업 유효성 검사는 favicon에 대한 선택 사항이지만 잘못된 <head> 중첩(<body> 내부 태그)으로 인해 브라우저가 아이콘을 완전히 무시할 수 있습니다.

설치가 중요한 경우 Lighthouse PWA 감사를 실행하세요. 탭이 괜찮아 보이는 경우에도 누락된 매니페스트 아이콘에 플래그를 표시합니다.

페이지를 북마크에 추가하고 브라우저를 완전히 닫았다가 다시 열어 북마크바에 여전히 표시가 나타나는지 확인하세요. 이는 지속적인 favicon 캐시 동작을 테스트합니다.

보안 헤더 및 아이콘 경로

Content-Security-Policy default-src는 동일한 출처에서 favicon 로드를 차단하지 않습니다. 교차 출처 아이콘 URL에는 명시적인 img-src 또는 default-src 허용이 필요합니다.

하위 리소스 무결성은 favicon에 거의 적용되지 않습니다. 동일 출처 호스팅은 가장 단순한 보안 기본값으로 남아 있습니다.

아이콘이 CDN 하위 도메인에 있는 경우 href에서 절대 https:// URL을 사용하고 CORS가 관련이 없는지 확인하세요. favicon는 가져오기가 아닌 이미지로 로드됩니다.

데이터 방지: 프로덕션 HTML의 URI favicon. HTML 캐시를 팽창시키고 CDN 캐싱을 우회하며 CSP를 복잡하게 만듭니다.

태그 순서 및 중복

동일한 href 낭비 바이트가 있는 중복 rel=icon 태그가 있지만 렌더링이 중단되는 경우는 거의 없습니다. 충돌하는 href가 중복되어 디버깅이 혼란스러워집니다. 오래된 태그를 제거하세요.

일부 WordPress 테마는 Site Icon 태그를 인쇄하는 반면 플러그인은 다른 세트를 추가합니다. 플러그인 설치 후 중복을 감지하려면 소스 보기를 사용하세요.

헤드의 큰 스크립트 블록 앞에 아이콘 링크를 배치합니다. 아이콘이 다운로드 우선순위가 낮더라도 조기 발견은 첫 번째 페인트에 도움이 됩니다.

HTML5에는 void 요소에 닫는 슬래시가 필요하지 않습니다. <link ...> 및 <link ... />가 모두 검증되었습니다.

레거시 및 엣지 케이스

IE 조건부 주석이 종료되었습니다. 오래된 브라우저의 경우 아이콘 태그를 래핑하지 마세요.

헤드의 기본 태그는 상대 href 해상도를 변경합니다. /로 시작하는 아이콘 경로는 면역됩니다. 기본이 설정되면 상대 favicon.ico는 중첩 경로에서 중단됩니다.

Shadow DOM 및 웹 구성 요소는 페이지 favicon를 섀도우 루트로 상속하지 않습니다. 문서 수준 아이콘은 여전히 탭에 적용됩니다.

iframe 삽입에는 상위 문서가 아닌 삽입된 문서 favicon가 표시됩니다. 둘 다 제어하는 경우 각 프레임에는 자체 태그가 필요합니다.

Local file:// 테스트로는 /favicon.ico가 해결되지 않을 수 있습니다. 현실적인 아이콘 동작을 위해 로컬 개발 서버를 사용하십시오.

북마크릿 및 브라우저 확장 프로그램은 다른 사용자를 위해 귀하의 사이트 favicon를 변경할 수 없으며 로컬 크롬만 변경할 수 있습니다. 서버측에 올바른 태그를 제공하세요.

도구 사용해 보기

파비콘 생성기 PNG ICO 변환기