ICO 파일 여러 크기 한 번에 담기, 파비콘 안 뭉개지게
favicon.ico 파일 하나에는 사실 16×16부터 256×256까지, 서로 다른 해상도의 이미지 여러 장이 통째로 들어갈 수 있습니다. 사진 한 장에 크기가 하나뿐인 PNG·JPG와 달리, ICO는 여러 이미지를 한 파일 안에 묶어 담는 컨테이너 포맷이기 때문입니다. 이 구조를 모른 채 크기 하나만 넣어 저장하면, 브라우저 탭에서는 멀쩡한데 유독 바탕화면이나 즐겨찾기에서만 흐릿하게 보이는 이유를 알 수 없게 됩니다.
요약 ① .ico 파일 하나에 16~256px 등 여러 해상도 이미지가 함께 저장될 수 있습니다(단일 이미지가 아닌 컨테이너 포맷). ② 브라우저 탭·즐겨찾기·윈도우 아이콘이 각각 다른 크기를 골라 쓰기 때문에, 크기 하나만 넣으면 특정 위치에서 늘어나거나 뭉개집니다. ③ 파일 앞부분 헤더만 봐도 안에 이미지가 몇 개 들었는지 확인할 수 있고, PNG에서 원하는 크기 조합으로 새 ICO를 직접 만들 수도 있습니다.
문제: favicon.ico 하나인데 왜 위치마다 다르게 보일까
파비콘을 favicon.ico 하나로 올려두면 실제로는 여러 곳에서 서로 다른 크기를 꺼내 씁니다. 브라우저 탭은 보통 16px을 쓰지만, 즐겨찾기 목록이나 윈도우 작업표시줄·바탕화면 바로가기는 32px 이상을 요구합니다.
파일 안에 16px 이미지 하나만 들어 있으면, 32px이나 48px이 필요한 곳에서는 그 작은 이미지를 억지로 확대해서 씁니다. 그 결과 브라우저 탭에서는 선명하던 아이콘이 바탕화면이나 즐겨찾기에서는 유독 계단처럼 뭉개져 보입니다.
무료 파비콘 생성 도구로 만든 ico가 실제로는 한 가지 크기만 담고 있는 경우도 흔합니다. PNG 파일의 확장자만 .ico로 바꿔서 올리는 경우도 있는데, 이건 내부 구조 자체가 ICO 컨테이너가 아니라서 아예 열리지 않는 프로그램도 있습니다.
해결: 헤더로 확인하고, 원하는 크기 조합으로 직접 만들기
ICO 안에 이미지가 몇 개 들었는지 헤더로 확인하기
ICO 파일의 구조는 표준화되어 있어서, 앞부분 몇 바이트만 봐도 안에 이미지가 몇 개 들었는지 알 수 있습니다. 맨 앞 4바이트는 고정값(리저브 2바이트 + 타입 2바이트, 항상 0과 1)이고, 이어지는 2바이트(5~6번째 바이트)가 안에 들어있는 이미지 개수입니다.
헥스 에디터로 이 부분만 열어봐도, 지금 갖고 있는 favicon.ico가 크기 하나짜리인지 여러 개짜리인지 바로 알 수 있습니다. 그 뒤로는 이미지 개수만큼 가로·세로·데이터 위치 정보가 16바이트씩 반복해서 나오고, 그다음에 실제 이미지 데이터가 이어집니다. 최근 만들어진 ICO는 이 자리에 PNG 데이터를 그대로 넣는 경우가 많고, 오래된 ICO는 압축되지 않은 비트맵 데이터를 넣기도 합니다.
PNG에서 원하는 크기 조합으로 직접 만들기
새로 만들 때도 도구 없이 가능합니다. 파이썬 Pillow 라이브러리는 im.save("favicon.ico", sizes=[(16,16),(32,32),(48,48),(64,64),(128,128),(256,256)]) 한 줄로 여러 해상도를 담은 ICO를 만들어 줍니다. ImageMagick을 쓴다면 convert logo.png -define icon:auto-resize=256,128,64,48,32,16 favicon.ico 명령으로도 같은 결과를 얻을 수 있습니다.
어떤 크기를 넣을지는 쓰이는 위치에 따라 다릅니다. 브라우저 탭·즐겨찾기에는 16px, 윈도우 작업표시줄·macOS 축소 아이콘에는 32px, 바탕화면 바로가기에는 48px, 고해상도 디스플레이나 윈도우 큰 아이콘 보기에는 64px 이상이 흔히 쓰입니다.
명령어나 프로그램 설치 없이, 브라우저에서 정사각형 PNG를 올리고 원하는 크기만 체크해 바로 하나의 ICO로 묶고 싶다면 저희 도구로 확인하기 좋습니다.
무료 · 설치 없음 · PNG 업로드 후 크기만 체크하면 여러 해상도가 든 ICO를 바로 만듭니다
이 도구는 PNG를 올리고 16·32·48·64·128·256px 중 원하는 크기를 체크한 뒤 만들기 버튼을 누르면, 그 크기들을 각각 렌더링해 하나의 .ico 파일로 묶어줍니다. 반대로 ICO 파일을 올리면 안에 든 여러 해상도 중 가장 큰 이미지를 골라 PNG로 꺼내줍니다.
자주 막히는 지점
| 증상 | 원인 | 확인 방법 |
|---|---|---|
| PNG 확장자만 .ico로 바꿨는데 못 씀 | 확장자만 바뀐 파일은 진짜 ICO 컨테이너 구조가 아님 | 파일 앞 6바이트에 리저브·타입·개수 헤더가 있는지 확인 |
| 정사각형이 아닌 이미지를 넣음 | 각 해상도로 렌더링할 때 비율이 무시되고 정사각형으로 늘어남 | 원본을 정사각형으로 먼저 자른 뒤 변환 |
| 만든 favicon.ico가 큰 아이콘에서 뭉개짐 | 16px 하나만 넣고 저장한 ICO를 확대해서 씀 | 16~256px 중 여러 크기를 함께 체크했는지 확인 |
| ICO에서 추출한 PNG가 생각보다 작거나 큼 | 안에 든 여러 해상도 중 면적이 가장 큰 이미지 하나만 자동 추출됨 | 다른 크기가 필요하면 원본 PNG를 따로 보관 |
| 새 favicon을 올렸는데 브라우저 탭 아이콘이 안 바뀜 | 브라우저가 이전 파일을 캐시해 둔 경우가 흔함 | 강력 새로고침을 하거나 파일명을 바꿔 캐시를 우회 |
정리
favicon.ico는 사진 한 장이 아니라 여러 해상도를 한 파일에 묶은 컨테이너입니다. 헤더 6바이트만 봐도 안에 몇 개가 들었는지 알 수 있고, Pillow나 ImageMagick 같은 도구로 직접 여러 크기를 담아 만들 수도 있습니다.
브라우저에서 정사각형 PNG를 올리고 필요한 크기만 체크해 바로 하나로 묶거나, 반대로 이미 있는 ICO에서 이미지를 꺼내 PNG로 되돌리고 싶을 때는 아래에서 바로 확인해 보세요.
무료 · 설치 없음 · PNG 업로드 후 크기만 체크하면 여러 해상도가 든 ICO를 바로 만듭니다
자주 묻는 질문
favicon.ico에는 몇 가지 크기를 넣어야 하나요?
정해진 표준 개수는 없습니다. 브라우저 탭·즐겨찾기·윈도우 아이콘처럼 쓰이는 위치가 다르기 때문에, 흔히 16·32·48px을 기본으로 넣고 고해상도 화면까지 고려해 64px 이상을 추가하는 방식이 널리 쓰입니다.
ICO 파일을 PNG로 변환했더니 안에 있던 다른 크기들은 어디로 갔나요?
ICO 안에 여러 해상도가 들어 있어도, 변환 과정에서는 보통 그중 면적이 가장 큰 이미지 하나만 골라 PNG로 꺼냅니다. 다른 크기의 이미지도 원본 ICO 파일 안에는 그대로 남아 있지만, 추출 결과로는 나오지 않습니다.
PNG 파일의 확장자만 .ico로 바꿔서 써도 되나요?
권장하지 않습니다. ICO는 앞부분에 정해진 헤더와 이미지 목록(디렉터리)이 있어야 하는 별도의 파일 구조라서, 확장자만 바꾼 PNG는 이 구조가 없어 ICO를 요구하는 프로그램에서 열리지 않을 수 있습니다.