파비콘은 파일 형식보다 작은 크기에서 알아볼 수 있는지가 중요합니다. 정사각형 원본으로 변환한 뒤 실제 브라우저 탭과 검색용 조건을 따로 확인하세요.
PNG → ICO
큰 로고를 그대로 줄이면 왜 흐려질까요
브랜드 로고가 512픽셀 화면에서는 선명해도 브라우저 탭처럼 작은 공간에서는 가는 선과 긴 글자가 픽셀 몇 개로 줄어듭니다. PNG를 ICO로 바꾼다고 디테일이 새로 정리되는 것은 아닙니다. 축소된 결과에서 무엇이 남아야 하는지를 먼저 고르는 것이 파비콘 제작의 출발점입니다.
전체 상호를 넣기보다 식별 가능한 한 글자나 단순한 심벌을 쓰는 편이 나을 수 있습니다. 이는 모든 브랜드에 같은 디자인을 권한다는 뜻이 아니라, 실제 표시 크기에서 알아보기 쉬운 핵심 형태를 정하자는 기준입니다. 작은 미리보기를 먼저 만들어 보며 색 대비와 외곽선을 확인하세요.
- 긴 문구와 가는 장식 줄이기
- 작은 크기에서 남을 핵심 형태 정하기
변환 전에 원본 디자인을 작은 화면용으로 단순화해야 할 수 있습니다.
원본 PNG의 비율과 여백을 점검하세요
정사각형 원본은 다양한 아이콘 표시 영역에 맞춰 검토하기 쉽습니다. 하지만 정사각형 캔버스 안에 넓은 빈 공간이 있으면 실제 마크는 예상보다 작게 보입니다. 반대로 도형을 끝까지 밀어 붙이면 작은 탭에서 가장자리가 답답하거나 잘린 듯 보일 수 있습니다. 캔버스 크기와 도형의 점유율을 따로 살펴보세요.
투명 배경을 쓰는 경우에는 밝은 탭과 어두운 탭에서 윤곽이 보이는지도 확인해야 합니다. 흰색 로고를 투명한 배경으로 내보내면 밝은 화면에서 사라진 것처럼 보일 수 있습니다. 단색 바탕을 둘지, 로고에 대비되는 외곽을 줄지 등 실제 사용 환경에 맞게 판단하세요.
- 정사각형 캔버스와 도형 점유율 확인하기
- 밝은 화면과 어두운 화면에서 각각 보기
파일 치수가 커도 도형이 너무 작으면 작은 탭에서 읽히지 않습니다.
ICO 변환 결과를 여러 크기에서 보세요
ICO는 웹 아이콘으로 사용할 수 있는 형식 가운데 하나입니다. 하지만 ICO 확장자라는 사실만으로 모든 크기의 모습이 검증되지는 않습니다. 변환 도구가 어떤 크기를 결과에 포함하는지 확인하고, 최소한 실제 탭에서 보이는 작은 크기와 더 큰 표시 화면을 각각 확인하는 편이 안전합니다.
특히 16픽셀 정도의 작은 미리보기에서는 안쪽 구멍이 막히거나 두 획이 붙을 수 있습니다. 원본 PNG와 변환된 ICO를 같은 크기로 비교하고, 변화가 크면 작은 크기 전용 형태를 별도로 준비하세요. 이미지를 크게 확대해 보는 것만으로는 실제 탭에서의 인상을 판단하기 어렵습니다.
- 변환 도구의 출력 크기 설정 확인하기
- 작은 미리보기와 실제 탭 비교하기
작은 크기 전용 시안을 만드는 것이 단순한 재변환보다 효과적일 때가 있습니다.
검색용 파비콘 요건은 탭 표시와 다릅니다
Google Search Central은 검색 결과용 파비콘에 정사각형 비율과 최소 8×8픽셀을 요구하며, 여러 표시 영역에서 잘 보이도록 48×48픽셀보다 큰 이미지를 권장합니다. 이는 작은 브라우저 탭에서의 디자인 검사를 생략해도 된다는 뜻은 아닙니다. 검색 결과와 탭은 표시 조건이 서로 다릅니다.
Google은 ICO를 포함한 여러 파일 형식을 지원한다고 안내합니다. 따라서 검색 결과에 나오기 위해 무조건 ICO로만 바꿔야 하는 것은 아닙니다. 실제 사이트에서는 아이콘 URL이 안정적이고 검색 크롤러가 접근할 수 있는지 같은 연결 조건도 확인해야 합니다. 도구에서 변환한 파일 하나만 올려 두고 끝내지 마세요.
- 검색용 크기·비율 요건 따로 확인하기
- 아이콘 URL과 페이지 연결 확인하기
검색 결과에 보이는 시점과 모양은 파일 변환만으로 확정되지 않습니다.
사이트에 적용한 다음 마지막으로 검사하세요
PNG를 ICO로 바꿨다면 결과 파일을 열어 가장자리, 대비, 투명 영역을 살펴보고 사이트의 아이콘 연결이 실제 파일을 가리키는지 확인하세요. 오래된 아이콘이 계속 보인다면 캐시 영향일 수도 있으므로 다른 브라우저나 새 세션에서 확인해 보세요. 파일 자체 문제인지 연결 문제인지 구분하는 것이 중요합니다.
마지막으로 브라우저 탭을 여러 개 열어 실제 사용 상황에서 쉽게 구별되는지 봅니다. 작게 만든 후에 글자가 읽히지 않는다면 ICO 설정만 반복해서 바꾸기보다 원본 심벌을 단순화하세요. 승인된 PNG 원본과 ICO 결과를 구분해 보관하면 나중에 색이나 모양을 조정하기 쉽습니다.
- 사이트의 아이콘 링크와 파일 응답 확인하기
- 실제 탭에서 식별 가능한지 비교하기
좋은 파비콘의 최종 기준은 실제 사용 위치에서 알아볼 수 있는지입니다.
핵심만 정리했어요
- 원본 PNG는 정사각형에 가깝게 준비하고 복잡한 디테일을 줄이세요.
- ICO로 변환해도 작은 크기에서 글자와 선이 자동으로 또렷해지지는 않습니다.
- 브라우저 탭 미리보기와 검색 결과의 파비콘 요건은 별도로 확인하세요.
- 배포 뒤에는 실제 페이지의 아이콘 연결과 표시 결과까지 검증하세요.
자주 묻는 질문
PNG를 ICO로만 바꾸면 파비콘이 선명해지나요?
아니요. 원본의 작은 글자와 복잡한 선은 변환 후에도 작게 뭉개질 수 있습니다. 실제 표시 크기에서 디자인을 확인하세요.
파비콘 원본은 반드시 정사각형이어야 하나요?
검색 결과용으로는 Google이 정사각형 비율을 요구합니다. 다양한 표시 영역을 고려할 때 원본도 정사각형으로 준비하는 편이 좋습니다.
검색 결과에 보이려면 ICO만 사용할 수 있나요?
아니요. Google은 ICO 외에도 PNG 등 여러 형식을 지원합니다. 형식과 함께 크기, 비율, 접근 가능한 URL을 확인하세요.
16픽셀에서 글자가 뭉개지면 어떻게 하나요?
긴 문구를 줄이고 핵심 심벌의 선과 여백을 단순화한 작은 크기용 시안을 시험해 보세요.
파일을 교체했는데 이전 아이콘이 보이는 이유는 무엇인가요?
페이지의 아이콘 연결이 다른 파일을 가리키거나 브라우저 캐시가 남았을 수 있습니다. 링크와 실제 파일을 확인하고 새 세션에서도 비교하세요.