HTML에 파비콘을 추가하는 방법
일반 HTML 페이지에 파비콘을 추가하는 것은 한 줄만 변경하면 됩니다. 그러나 최신의 완전한 설정은 6줄이며 iOS, Android, 다크 모드 및 PWA 설치를 포함합니다.
모든 브라우저가 존중하는 단일 태그는 <link rel="icon" href="/favicon.ico">입니다. 사이트 루트에 favicon.ico를 삭제하면 80% 완료됩니다.
나머지 20%(apple-touch-icon, PNG 변형, 다크 모드를 지원하는 SVG 및 웹 매니페스트)는 기본 아이콘과 세련된 브랜드 경험을 구분하는 요소입니다.
작동 방식
- 1
파비콘 패키지 생성
FetchFavicon 패키지 생성기를 사용하여 필요한 모든 파일과 붙여넣기 가능한 마크업을 생성합니다.
- 2
사이트 루트에 파일 삭제
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
<head>에 스니펫을 붙여넣으세요.
<link> 태그 6개 + <meta name="theme-color"> 1개.
지금 사용해 보기
HTML 스니펫 가져오기
파비콘 생성기자주 묻는 질문
<link> 태그는 어디로 가나요?+
<head> 내부, 어디에서나 — </head> 이전에 오는 한 순서는 중요하지 않습니다.
.ico와 PNG가 모두 필요합니까?+
예. .ico는 범용 폴백입니다. PNG는 높은 DPI 화면에서 가장 선명하게 렌더링됩니다.
다크 모드는 어떻습니까?+
<style> 블록 내에 선호 색상 구성표 미디어 쿼리를 포함하는 SVG 변형을 제공합니다.