파비콘 생성기
아이콘 파일을 기준으로 빠르게 점검합니다.
원본 이미지 업로드
정사각형에 가까운 고해상도 이미지를 사용하면 작은 파비콘에서도 더 선명합니다.
미리보기
HTML head 코드
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
파비콘 제작 기준
여러 크기 준비
브라우저, 북마크, 고정 탭, 설치 안내, 모바일 바로가기는 서로 다른 크기를 요청합니다. 전체 세트를 준비하면 작은 파일을 억지로 확대하는 상황을 줄일 수 있습니다.
PNG와 ICO 함께 제공
최신 브라우저는 PNG 아이콘을 잘 처리합니다. ICO는 레거시 호환성에 유용하고, PNG는 보통 투명도와 파일 관리가 더 깔끔합니다.
작은 크기에서 읽히기
favicon은 16x16으로 보이는 경우가 많습니다. 전체 로고를 억지로 넣기보다 단순한 형태, 강한 대비, 적은 디테일이 더 잘 살아남습니다.
플랫폼별 사용처
브라우저 파비콘
탭, 북마크, 브라우저 방문 기록 목록에서 사용됩니다.
Apple touch icon
사이트를 홈 화면에 추가할 때 사용됩니다. 배경이 불투명한 그래픽이 보통 가장 안정적입니다.
Android / PWA icon
웹 매니페스트와 함께 설치 안내, 시작 화면, 작업 전환 화면에서 사용됩니다.
사이트에 적용하는 방법
아이콘 팩 다운로드
다운로드 버튼으로 PNG 파일, 매니페스트 파일, head 코드 조각이 들어 있는 zip 파일을 받습니다.
public 경로에 배치
압축을 푼 파일을 사이트의 public 디렉터리처럼 공개 접근 가능한 위치에 둡니다.
head 코드 추가
생성된 head 코드 조각을 문서 head에 붙이고 브라우저 캐시를 비운 뒤 새 아이콘을 확인합니다.
자주 묻는 질문
zip 파일에는 무엇이 포함되나요?
일반 브라우저 favicon PNG, Apple touch icon, Android icon 크기, site.webmanifest 파일이 포함됩니다.
site.webmanifest는 무엇인가요?
사이트가 홈 화면에 설치되거나 앱처럼 실행될 때 브라우저가 어떻게 다뤄야 하는지 알려주는 JSON 매니페스트입니다.
이 아이콘들을 어떻게 사용하나요?
생성된 파일을 public 루트에 올리고 파비콘을 노출할 페이지의 head에 생성된 마크업을 포함하세요.
예전 파비콘이 계속 보이는 이유는 무엇인가요?
브라우저는 파비콘을 강하게 캐시합니다. 강력 새로고침, 사이트 데이터 삭제, 아이콘 URL 변경, 새 브라우저 프로필 테스트를 시도하세요.
파비콘이 앱 아이콘과 완전히 같아야 하나요?
연관성은 있어야 하지만 동일할 필요는 없습니다. 많은 브랜드가 파비콘 크기에는 단순화된 심볼을, 설치형 앱 아이콘에는 더 풍부한 아이콘을 사용합니다.