파비콘 만들기
이미지를 16·32·180px 파비콘 세트로 변환해 저장해요.
이럴 때 쓰세요
이렇게 사용하세요
결과가 예상과 다를 때
파일이 열리지 않아요
지원하는 형식인지 확인해 주세요. 암호가 걸린 파일은 암호를 푼 뒤 다시 시도하면 돼요.
결과가 마음에 안 들어요
원본은 그대로예요. 옵션이나 프리셋을 바꿔 다시 시도할 수 있어요.
자주 하는 실수
- 원본 로고를 그대로 축소하면 16×16px에서 뭉개집니다. 한두 획으로 된 도형이나 심볼을 파비콘으로 쓰는 게 낫습니다.
- ICO로 저장한 PNG 한 장만 넣으면 구형 브라우저는 못 읽습니다. ICO 안에는 여러 크기가 함께 들어 있어야 해요.
- iOS는 180px apple-touch-icon이 별도 파일이어야 합니다. 파비콘만 넣으면 사각 아이콘으로 뜹니다.
- HTML에 link 선언을 안 넣으면 파일을 만들어도 반영되지 않습니다. rel 속성 누락이 가장 흔한 원인이에요.
계산 근거
파비콘은 16×16px부터 180×180px까지 같은 이미지가 여러 배율로 축소되므로 미세한 요소가 사라집니다. 그래서 심볼이나 단색 실루엣이 기본 원칙이고, ICO 포맷은 여러 해상도를 한 파일에 담은 컨테이너입니다.
실제로 계산해 보면
180px 로고를 16×16으로 줄이면 면적 비율은?
180×180 = 32,400px인데 16×16 = 256px. 면적은 약 127분의 1로 줄고 변 길이는 11분의 1이 됩니다. 원본 대비 윤곽이 크게 뭉개지는 이유예요.
파비콘용으로 어떤 크기를 만들어야 하나요?
16, 32, 48, 180px 네 장이면 탭·바로가기·모바일 아이콘을 모두 커버합니다. 다크 배경용이 필요하면 배경색을 직접 칠해 PNG를 따로 만드세요.
favicon.ico 하나만 넣으면 모든 환경에서 되나요?
아닙니다. ICO 컨테이너는 구형 브라우저에 유효하지만 최신 환경에서는 PNG를 link 태그로 직접 선언하는 게 안전합니다. 두 가지를 함께 두면 누락이 없어요.
더 궁금한 것
ICO를 직접 만들려면 어떻게 해요?
PNG 여러 장을 ICO 컨테이너로 묶으면 됩니다. 온라인 변환을 한 번 거치거나, 여러 크기의 이미지를 준비해 아이콘 편집기에서 ICO로 저장하세요. ICO를 PNG 세트로 풀어내는 일도 흔합니다.
파비콘이 반영되지 않는 이유는?
브라우저가 파비콘을 오래 캐시하는 경우가 많습니다. 파일명을 바꿔 버전을 올리거나 개발자 도구에서 캐시를 비우고 새로고침하세요. 평소에는 아무 변화가 없는데 배포 직후에만 생기기도 합니다.
밝은 배경과 어두운 배경용 두 개가 꼭 필요한가요?
밝은 탭 배경에서 윤곽이 사라지면 밝은 배경 전용 아이콘을 하나 더 두면 됩니다. 그 외에는 필수가 아니며, 아무것도 설정하지 않으면 페이지 제목 첫 글자가 대신 표시됩니다.
알아둘 경계값
- 원본 중앙의 정사각형만 잘라내 변환해요. 로고가 가장자리에 있으면 잘릴 수 있어요.
- 미리보기는 최대 72px로 축소 표시돼 실제 180px와 다르게 보일 수 있어요.
- 세 파일은 각각 저장 버튼을 눌러야 해요. 한 번에 묶음 다운로드는 되지 않아요.
- 투명 배경은 그대로 유지돼 PNG로 저장돼요. 흰 배경이 필요하면 원본에 배경을 넣고 변환하세요.
- 이미지를 선택하기 전에는 변환이 동작하지 않아요. 안내 문구가 표시되니 파일을 먼저 올리세요.
- 파일명은 크기가 포함된 PNG로 고정돼요. 서버에 올릴 때 필요한 이름으로 바꿔 사용하세요.
결과를 믿기 전 확인 목록
- 원본 해상도가 180px 이상인지 확인하세요.
- 중앙 정사각형에 로고가 들어오는지 확인하세요.
- 16px 크기에서 글자가 읽히는지 미리 확인하세요.
- 배경 투명 여부가 의도한 대로인지 확인하세요.
- 세 크기 파일을 빠짐없이 모두 저장했는지 확인하세요.
- 서버 연결 코드에 파일명이 맞는지 확인하세요.
- 브라우저 캐시를 비우고 반영됐는지 확인하세요.
- 다크모드 브라우저 탭에서도 보이는지 확인하세요.
- 모바일 홈화면 아이콘용 180px를 올렸는지 확인하세요.
자주 묻는 질문
ICO 파일도 되나요?
PNG 세트를 제공하며 ICO 변환 가이드를 함께 안내합니다.
ICO 파일은 어떻게 만드나요?
이 도구는 PNG 세트를 만듭니다. ICO가 필요하면 변환 사이트를 한 번 더 거치거나, 최신 브라우저는 PNG 파비콘도 인식하니 그대로 쓰세요.