파비콘(favicon)은 브라우저 탭, 즐겨찾기, 모바일 홈 화면에 표시되는 작은 사이트 아이콘입니다. 제대로 갖춰두면 사이트가 한층 완성도 있어 보이고, 검색 결과나 북마크에서도 한눈에 식별됩니다. 문제는 기기와 용도마다 요구하는 크기가 달라, 16px부터 애플 터치 아이콘용 180px, 안드로이드 홈 화면용 192px까지 여러 크기를 한꺼번에 준비해야 한다는 점입니다. 이 도구는 이미지 한 장만 올리면 자주 쓰는 크기(16·32·48·64·180·192px)의 PNG를 한 번에 만들어 ZIP으로 묶어 줍니다.
생성된 ZIP에는 각 크기의 PNG와 함께 적용 방법을 담은 안내 파일이 들어 있고, 화면에서는 HTML <head>에 붙여넣을 link 태그 코드를 '복사' 버튼으로 바로 가져올 수 있습니다. 정사각형 이미지를 쓰면 가장 깔끔하며, 직사각형이라도 비율을 유지한 채 중앙에 배치되고 남는 부분은 투명 처리됩니다. 모든 변환은 브라우저 안에서 이루어지므로 로고 이미지가 서버로 전송되지 않아, 공개 전 디자인도 안전하게 다룰 수 있습니다.
사용 방법
- 1
이미지 선택
파비콘으로 만들 이미지를 추가합니다. 로고처럼 단순하고 정사각형에 가까운 이미지가 작은 크기에서도 잘 보입니다.
- 2
생성 실행
파비콘 생성하기를 누르면 6가지 크기의 PNG가 즉시 만들어지고 미리보기로 표시됩니다.
- 3
ZIP 다운로드
ZIP 다운로드 버튼으로 전체 세트를 받습니다. 사용법 안내 텍스트가 함께 포함됩니다.
- 4
HTML 적용
ZIP을 풀어 PNG를 사이트 루트에 올리고, 화면의 HTML 코드를 복사해 <head>에 붙여넣으면 끝입니다.
활용 팁
- 16·32px처럼 아주 작은 크기에서는 가는 선이나 작은 글자가 뭉개집니다. 단순한 심볼이 가장 또렷합니다.
- 정사각형 원본을 준비하면 여백 없이 꽉 찬 아이콘이 됩니다.
- 180px는 아이폰 홈 화면(apple-touch-icon), 192px는 안드로이드 홈 화면용으로 권장됩니다.
- 투명 배경이 필요하면 PNG 원본을 사용하세요. 생성된 파비콘도 투명 배경을 유지합니다.
자주 묻는 질문
.ico 파일도 만들어지나요?
이 도구는 PNG 세트를 생성합니다. 최신 브라우저는 PNG 파비콘을 모두 지원하므로 favicon-32.png를 기본 아이콘으로 지정하면 충분합니다.
어떤 크기가 들어 있나요?
16, 32, 48, 64, 180, 192px PNG가 들어 있습니다. 16/32는 탭·즐겨찾기, 180은 애플 터치 아이콘, 192는 안드로이드 홈 화면용입니다.
직사각형 이미지를 올리면 어떻게 되나요?
비율을 유지한 채 정사각 캔버스 중앙에 배치되고, 남는 영역은 투명으로 채워집니다. 다만 정사각형 원본이 가장 깔끔합니다.
이미지가 서버에 업로드되나요?
아니요. 파비콘 생성은 100% 브라우저에서 처리되며 이미지가 외부로 전송되지 않습니다.
HTML 코드는 어디에 넣나요?
웹페이지의 <head> 태그 안에 붙여넣습니다. 화면의 '복사' 버튼으로 코드를 그대로 가져올 수 있습니다.