파비콘 생성기

1 파비콘은 어디에 쓰이나요

파비콘은 웹사이트의 얼굴입니다. 브라우저 탭, 북마크, 방문 기록, 그리고 일부 검색 화면에서 사이트를 식별하는 작은 아이콘으로 쓰입니다. 작은 이미지지만 사용자는 이 아이콘으로 같은 회사 사이트인지, 믿을만한 페이지인지 빠르게 판단합니다.

2 favicon.ico는 한 장짜리가 아니라 묶음 파일입니다

favicon.ico는 흔히 16 픽셀 한 장이라고 오해합니다. 실제로는 한 파일 안에 여러 크기의 래스터 아이콘을 담을 수 있는 컨테이너에 가깝습니다. 브라우저가 상황에 맞는 크기를 선택할 수 있어 호환성이 좋아집니다.

• 예전 환경은 루트의 favicon.ico를 먼저 찾는 경우가 많습니다
• 최신 환경은 PNG를 선호하기도 해서 PNG를 추가로 함께 배포하는 편이 안전합니다
• iOS와 PWA는 별도 아이콘을 더 잘 활용하므로 결과 패키지는 일부 중복이 정상입니다

3 구글 파비콘 가이드 핵심만 정리

검색 화면까지 고려한다면 아래 조건을 반드시 지키는 것이 좋습니다. 조건을 지켰다고 항상 노출이 보장되는 것은 아니지만, 지키지 않으면 기본 아이콘으로 대체될 수 있습니다.

• 호스트명 기준으로 하나만 지원됩니다. 서브디렉터리마다 다른 파비콘은 불가합니다.
• 홈 페이지와 파비콘 파일이 크롤링 가능해야 합니다.
• 브랜드를 대표하는 시각 요소여야 합니다.
• 정사각형 1 대 1 비율이 필요합니다. 최소 8 픽셀도 가능하지만 48 픽셀보다 크게 쓰는 것이 권장됩니다.
• 파비콘 URL은 자주 바꾸지 않는 것이 좋습니다.

4 ktoolio 파비콘 생성기 사용법

1. 정사각형 소스 이미지를 업로드합니다. 512 이상을 권장합니다. 투명이 필요하면 PNG가 가장 안전합니다.
2. 배경 타입을 선택합니다. JPG는 투명을 지원하지 않으므로 단색 배경을 선택하는 것이 맞습니다.
3. 여백을 설정합니다. 14에서 18 퍼센트는 잘림을 줄이기 위한 안전 영역 값으로 자주 쓰입니다.
4. 모양을 선택합니다. 원형이나 iOS 스퀘어클처럼 실제 기기에서 흔히 쓰는 마스킹을 미리 가정해 확인할 수 있습니다.
5. 출력 포맷을 고릅니다. 기본은 favicon.ico와 favicon 32 PNG와 iOS용 apple touch 아이콘을 추천합니다. PWA를 쓸 때만 192 512와 매니페스트를 추가하세요.
6. ZIP을 다운로드하고 public 또는 루트에 업로드합니다. 제공되는 head 삽입 코드를 그대로 적용하면 됩니다.

5 작은 크기 보정이란 무엇인가요

16이나 32 같은 초소형 아이콘은 다운스케일 과정에서 선이 뭉개지기 쉽습니다. 작은 크기 보정은 이런 흐림을 줄이기 위해 가벼운 선명화 처리를 적용하는 옵션입니다.

• 로고가 단순하고 선이 굵으면 켜두는 편이 유리합니다
• 가장자리가 거칠거나 테두리에 번짐이 생기면 끄는 편이 낫습니다
• 보정이 과해 보이면 여백을 조금 늘리는 방식으로 안정시킬 수 있습니다

6 안드로이드 maskable 아이콘이 필요한 이유

안드로이드 런처는 기기나 테마에 따라 아이콘을 원형, 둥근 사각형, 기타 형태로 마스킹합니다. 일반 아이콘만 제공하면 로고가 잘리거나 흰 배경 위에 작게 축소되어 보일 수 있습니다.

maskable 아이콘은 마스킹을 전제로 안전 영역을 확보한 전용 아이콘입니다. 웹 매니페스트 icons 항목에서 purpose에 maskable 성격을 선언하면, 브라우저가 마스킹용으로 사용할 수 있다고 판단합니다.

7 문제 해결 체크리스트

• 변경이 반영되지 않음: 캐시를 비우고 강력 새로고침 후, head 링크 경로가 실제 파일 경로와 일치하는지 확인
• iOS에서 모서리 잘림: 여백을 늘리고 iOS 스퀘어클 미리보기 기준으로 확인
• 안드로이드 설치 아이콘이 작음: maskable 출력과 매니페스트 연결 여부 확인
• 검색에서 기본 아이콘: 홈과 아이콘 크롤링 가능 여부 확인 후 재크롤을 기다림

8 FAQ