파비콘 생성기
이미지 하나로 필요한 크기를 한 벌 만듭니다. 넣을 HTML도 함께 드립니다.
파비콘 생성기
이미지 고르기
정사각형에 512px 이상이면 좋습니다
로고 이미지를 끌어다 놓으세요
PNG·JPG·WebP · 정사각형 권장
만들 크기
안드로이드 홈 화면에 표시될 이름입니다
사용법
- 로고 이미지를 넣습니다. 정사각형에 512px 이상이면 좋습니다.
- 필요한 크기를 고릅니다. 기본값이면 대부분의 경우 충분합니다.
- 파일을 모두 내려받아 사이트 최상위 폴더에 올립니다.
- 함께 나온 HTML을 페이지의
head안에 넣습니다.
파비콘에서 자주 어긋나는 것
16px에서는 글자가 사라집니다. 회사 이름을 그대로 넣은 로고는 탭에서 알아볼 수 없습니다. 머리글자 하나나 단순한 도형으로 줄이세요. 위 미리보기를 실제 크기로 보여 주는 이유입니다.
바꿔도 예전 아이콘이 남습니다. 브라우저가 파비콘을 오래 저장합니다. 강력 새로고침을 하거나 파일 주소를 직접 열어 확인하세요. 배포 직후 안 바뀐다고 파일을 다시 만들 필요는 없습니다.
아이폰 아이콘은 투명을 검게 칠합니다. 배경이 투명한 로고를 apple-touch-icon으로 쓰면 검은 사각형 안에 그림이 놓입니다. 위의 투명 배경 채우기로 흰색을 깔아 두세요.
여백을 조금 두는 편이 낫습니다. 아이폰·안드로이드는 아이콘 모서리를 둥글게 깎습니다. 그림이 가장자리에 꽉 차 있으면 잘려 나갑니다.
자주 묻는 질문
- favicon.ico는 왜 안 만드나요?
- 요즘 브라우저는 PNG 파비콘을 그대로 받기 때문입니다. .ico는 여러 장을 하나로 묶는 옛 형식이라 만들 이유가 줄었습니다. 다만 아주 오래된 환경까지 챙겨야 한다면 32×32 PNG를 favicon.ico라는 이름으로 두는 방법이 흔히 쓰입니다.
- 원본은 어떤 이미지가 좋나요?
- 정사각형에 가깝고 512px 이상인 이미지가 좋습니다. 무엇보다 16px에서도 알아볼 수 있어야 합니다. 글자가 여러 자 들어간 로고는 작은 크기에서 뭉개지므로, 머리글자 하나나 단순한 도형으로 만드는 편이 낫습니다. 이 도구는 실제 크기 미리보기를 함께 보여 줍니다.
- 가로세로가 다른 이미지를 넣으면요?
- 가운데를 기준으로 정사각형으로 잘라냅니다. 늘려서 채우면 그림이 찌그러지기 때문입니다. 잘리는 부분이 중요하다면 미리 정사각형으로 잘라서 넣으세요.
- 어디에 넣어야 하나요?
- 만들어진 PNG들을 사이트의 최상위 폴더에 올리고, 아래 HTML을 페이지의 head 안에 넣으면 됩니다. 안드로이드 홈 화면 아이콘까지 쓰려면 함께 나오는 site.webmanifest도 같이 올리세요.
- 바꿨는데 예전 아이콘이 그대로 보입니다.
- 브라우저가 파비콘을 오래 저장해 두기 때문입니다. 강력 새로고침을 하거나, 주소창에 파비콘 파일 주소를 직접 열어 바뀐 것을 확인하세요. 그래도 안 바뀌면 파일 이름 뒤에 ?v=2 같은 것을 붙이는 방법이 있습니다.
이 도구는 브라우저 안에서만 계산하며 입력값을 서버로 보내지 않습니다. 분류: 이미지·미디어 · 마지막 수정 2026-09-08