🎨 Favicon 생성기
이모지나 텍스트로 간단하게 Favicon을 만들어보세요
Favicon 설정
미리보기
64×64 픽셀 미리보기
16×16
32×32
48×48
다운로드
HTML 코드
<!-- Favicon 링크 태그들 --> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png"> <link rel="manifest" href="/site.webmanifest">
Favicon 사용 가이드 📚
필수 크기
- • 16×16: 브라우저 탭
- • 32×32: 윈도우 작업표시줄
- • 48×48: 윈도우 바탕화면
- • 180×180: iOS Safari
- • 192×192: 안드로이드 크롬
- • 512×512: PWA 스플래시
설치 방법
- • 웹사이트 루트 폴더에 파일 업로드
- • HTML head 태그에 link 요소 추가
- • 캐시 문제 시 파일명에 버전 추가
- • PWA용 manifest.json 파일 생성
💡 디자인 팁
- 작은 크기에서도 식별 가능한 심플한 디자인 사용
- 브랜드 색상을 활용하여 일관성 유지
- 투명 배경보다는 색상 배경이 더 안전
- 텍스트보다는 심볼이나 이모지가 효과적