파비콘 만들기

이미지를 사이트에 실제로 필요한 파비콘 크기들로 만듭니다 — 브라우저 탭용 16·32·48px, 애플 터치 아이콘용 180px. 브라우저 안에서 정사각으로 잘라 각 크기로 스케일하며, 사이트 루트에 바로 넣을 수 있는 상태로 나옵니다.

사용 방법

1. 원본 이미지를 올립니다. 단순하고 대비가 강한 마크가 가장 좋습니다.
2. 정사각 크롭을 확인합니다. 중앙 기준으로 잘립니다.
3. 생성해서 아이콘 세트를 내려받습니다.
4. HTML head 에 링크하고 캐시를 비워 변경을 확인합니다.

이럴 때 씁니다

• 새 사이트에 탭·북마크·방문기록에서 보일 아이덴티티를 만들 때.
• 180px 터치 아이콘으로 iOS 홈 화면 아이콘을 제대로 보이게 할 때.
• 런칭 전에 프레임워크 기본 아이콘을 교체할 때.
• 흐릿한 옛 파비콘을 선명한 다중 크기 세트로 갱신할 때.

16픽셀 기준으로 디자인하세요

16×16 에서는 로고의 잔디테일과 글자가 뭉개집니다 — 살아남는 파비콘은 단색 배경 위의 굵은 도형 하나 또는 글자 하나입니다. 가장 작은 크기를 확대 말고 실제 크기로 확인하세요. 브라우저는 파비콘을 강하게 캐시하므로 배포 후 탭 아이콘이 안 바뀌면 대개 실패가 아니라 캐시입니다. 강력 새로고침이나 링크 태그에 버전 쿼리를 붙이면 해결됩니다. 180px 애플 터치 아이콘은 iOS 가 모서리를 알아서 둥글리니 모서리는 직각으로 두세요.

관련 도구

자주 묻는 질문

파비콘 만들기를 쓰면 사진이 서버로 올라가나요?

아니요. 파비콘 만들기는 브라우저의 Canvas API로 파일을 읽어 기기 안에서 모든 픽셀을 처리합니다. 이미지가 컴퓨터를 벗어나지 않기 때문에, 페이지를 연 뒤 인터넷을 꺼도 계속 동작합니다.

파비콘 만들기를 거치면 화질이 떨어지나요?

설정에 따라 다릅니다. JPEG와 WebP는 손실 압축이라 품질 값을 낮출수록 용량이 줄고 손상이 눈에 띕니다. PNG는 무손실이라 픽셀이 그대로 보존됩니다. 품질 80퍼센트 정도에서 시작해 보세요. 대부분의 사진은 원본의 3분의 1 용량에서도 눈으로는 차이가 없습니다.

파일 크기나 개수 제한이 있나요?

업로드가 없으므로 사이트가 거는 제한은 없습니다. 실질적인 한계는 기기 메모리이며, 5천만 화소가 넘는 아주 큰 파일은 오래된 휴대폰에서 느릴 수 있습니다.