파비콘(Favicon)은 브라우저 탭, 북마크, 모바일 홈 화면 등에 표시되는 작은 아이콘입니다. 웹사이트의 브랜드 아이덴티티를 나타내며 사용자가 여러 탭 중에서 사이트를 쉽게 구분할 수 있게 해줍니다. 이 도구는 하나의 이미지를 업로드하면 웹사이트에 필요한 모든 크기의 파비콘을 자동으로 생성합니다. 모든 처리는 브라우저에서 이루어져 안전합니다.

왜 크기가 여러 개 필요한가

파비콘 하나로 끝나지 않는 이유는 쓰이는 자리마다 요구 크기가 다르기 때문입니다. 브라우저 탭에는 16픽셀짜리가, 북마크 목록에는 32픽셀짜리가, 아이폰 홈 화면에 추가하면 180픽셀짜리가 쓰입니다. 안드로이드는 192픽셀 이상을 요구합니다.

큰 이미지 하나만 두고 브라우저가 줄이게 하면 작은 크기에서 뭉개집니다. 크기별로 따로 준비해야 어느 자리에서든 선명합니다.

16픽셀에서 살아남는 디자인

가장 중요한 원칙입니다. 파비콘은 손톱만 한 크기에서 알아볼 수 있어야 합니다. 로고를 그대로 축소하면 대부분 실패합니다.

글자는 한두 자만. 회사 이름 전체를 넣으면 16픽셀에서 얼룩으로 보입니다. 머리글자 하나가 낫습니다.
세부를 덜어내세요. 가는 선과 그라데이션은 작은 크기에서 사라집니다. 굵은 도형과 단색이 유리합니다.
대비를 확보하세요. 브라우저 탭 배경은 밝을 수도 어두울 수도 있습니다. 흰 배경에만 어울리는 연한 색은 다크 모드에서 묻힙니다.
여백을 조금 두세요. 가장자리까지 꽉 채우면 답답해 보이고, 원형으로 잘리는 환경에서 잘려나갑니다.

적용 후 안 바뀔 때

파비콘은 브라우저가 유독 오래 캐시합니다. 파일을 바꿔 올려도 예전 아이콘이 계속 보이는 일이 흔합니다. 일반 새로고침으로는 잘 바뀌지 않습니다.

확실한 방법은 주소창에 파비콘 파일 주소를 직접 입력해 새로 불러오는 것입니다. 파일명을 favicon-v2.png처럼 바꾸고 HTML에서 참조를 수정하면 확실히 반영됩니다. 배포 직후 확인이 필요할 때 쓰기 좋은 방법입니다.

자주 묻는 질문

어떤 이미지를 올려야 하나요?

정사각형에 가까운 이미지가 좋습니다. 512픽셀 이상이면 모든 크기를 선명하게 만들 수 있습니다. 배경이 투명한 PNG를 쓰면 어떤 배경에도 자연스럽게 얹힙니다.

파일을 어디에 두나요?

사이트 최상위에 두는 것이 관례입니다. 브라우저가 별도 선언 없이도 그 위치를 찾아보기 때문입니다. 다른 위치에 둔다면 HTML에서 경로를 명시해야 합니다.

이미지가 서버로 올라가나요?

올라가지 않습니다. 브라우저 안에서 크기를 조정해 바로 내려받습니다.

생성되는 크기

16x16: 브라우저 탭 기본 크기
32x32: 고해상도 디스플레이 탭
48x48: Windows 사이트 아이콘
64x64: Windows 사이트 아이콘 (고해상도)
128x128: Chrome 웹 스토어
180x180: Apple Touch Icon (iOS)
192x192: Android Chrome
512x512: PWA 스플래시 화면

파비콘 생성기

생성된 파비콘