요약 (TL;DR)
- 유니버설 입력: PNG, JPG, WebP 또는 SVG를 유효한 파비콘 세트로 변환합니다.
- 스마트 크기 조정: 정사각형 아이콘에 완벽하게 맞추기 위해 “커버(채우기)” 또는 “컨테인(여백 포함)“을 선택하세요.
- 프로덕션 표준: 단일 파일뿐만 아니라, 최신 웹 호환성에 필요한
favicon.ico+ PNG 조합을 생성합니다.
왜 전용 변환기를 사용해야 하나요?
단순히 logo.png를 favicon.ico로 이름을 바꿀 수는 없습니다. ICO 형식은 다양한 크기의 래스터 이미지를 보유하는 특정 컨테이너입니다. 브라우저는 현재 컨텍스트(탭 목록, 북마크 바)에 가장 선명한 버전을 선택하기 위해 이것이 필요합니다.
이 도구는 기술적 복잡성을 처리합니다:
- 리샘플링: 16x16 아이콘이 흐려지는 것을 방지하기 위한 고품질 다운샘플링 필터(Lanczos3).
- 컨테이너 빌드: 16x16, 32x32, 48x48 버전을 단일 바이너리
.ico파일로 컴파일. - 최신 폴백: Android, PWA 및 고해상도 화면용 표준 PNG(192x192, 512x512) 생성.
스마트 크로핑: 커버 vs 컨테인
대부분의 로고는 직사각형이지만 파비콘은 정사각형이어야 합니다.
1. 커버 (Cover / Crop to Fill)
- 동작: 이미지가 정사각형을 채울 때까지 확대합니다. 가장자리가 잘립니다.
- 추천: 심볼, 모노그램 또는 대략 정사각형인 아이콘.
2. 컨테인 (Contain / Fit Center)
- 동작: 정사각형 내에 완전히 들어가도록 이미지를 축소하고 투명 여백을 추가합니다.
- 추천: 자를 수 없는 넓은 워드마크나 높은 로고.
프로 팁: 로고가 넓은 워드마크인 경우, 16x16 정사각형에 억지로 넣으려 하지 마세요. 읽을 수 없게 됩니다. 브랜드의 단순화된 “이니셜” 또는 “심볼” 변형을 만드세요.
ICO 형식 이해하기
.ico 파일은 독특합니다. PNG와 달리 이미지의 디렉터리입니다.
- 16x16: 데스크톱의 표준 탭 아이콘.
- 32x32: 고해상도(Retina) 화면 및 작업 표시줄 바로 가기용.
- 48x48: Windows에서 바탕 화면 아이콘으로 사용.
모범 사례
- 크게 시작: 최소 512x512 픽셀의 이미지를 업로드하세요.
- 대비 확인: 로고가 밝은 배경과 어두운 배경 모두에서 보이는지 확인하세요.
- 투명도가 핵심: 투명 PNG 또는 SVG를 입력으로 사용하세요. 흰색 배경은 최신 다크 모드 브라우저 탭에서 시대에 뒤떨어져 보입니다.
자주 묻는 질문 (FAQ)
왜 파비콘이 흐릿해 보이나요?
16x16 픽셀에서는 256개의 점만 있습니다. 복잡한 세부 사항은 사라집니다. 해결책은 더 단순한 디자인을 사용하는 것입니다.
PNG만 사용해도 되나요?
대부분의 최신 브라우저는 PNG를 지원하지만, 엄격한 레거시 지원은 여전히 favicon.ico를 찾습니다. 둘 다 제공하는 것이 가장 안전합니다.