ICO란? 아이콘 파일과 파비콘 정리

ICO는 Windows가 프로그램과 폴더 아이콘에, 웹이 브라우저 탭의 작은 사이트 아이콘(파비콘)에 쓰는 형식입니다. 다른 이미지 형식과 구별되는 점은 하나의 파일에 같은 아이콘을 여러 크기로 담을 수 있다는 것입니다. 이 글에서는 ICO 파일의 내부 구조, Windows 버전에 따른 변화, 파비콘의 역사, 오늘날 필요한 크기, ICO 파일을 올바르게 만드는 방법을 설명합니다.

ICO란 무엇인가요?

ICO(확장자 .ico)는 Microsoft가 아이콘 리소스용으로 정의한 컨테이너 형식입니다. ICO 파일은 파일 안의 모든 이미지(예: 16x16, 32x32, 48x48픽셀)를 각각 별도 항목으로 나열하는 "아이콘 디렉터리"로 시작합니다. 그러면 Windows나 브라우저가 아이콘이 표시될 위치에 가장 잘 맞는 크기를 고릅니다.

IANA에 등록된 공식 MIME 유형은 image/vnd.microsoft.icon이지만, Microsoft 소프트웨어와 많은 서버는 여전히 image/x-icon을 씁니다. 마우스 커서용 CUR 형식은 거의 똑같은데, 디렉터리의 유형 필드에 1 대신 2를 쓰고 커서의 클릭 지점(핫스폿)을 저장합니다.

역사: Windows 아이콘에서 파비콘까지

• Windows 1.0: 아이콘은 흑백이었습니다.
• Windows 3.0: 여러 이미지를 담는 오늘날과 같은 디렉터리 기반 구조가 등장했습니다.
• 1995년: 존 호닉(John Hornick)의 Microsoft 문서 "Icons"가 ICO 구조를 자세히 설명하고, 개발자에게 최소한 16x16(16색), 32x32(16색), 48x48(256색) 이미지를 넣으라고 권했습니다.
• 1999년 3월: Internet Explorer 5가 파비콘을 지원한 첫 브라우저가 되었습니다. 사이트 루트의 favicon.ico 파일이 즐겨찾기와 주소 표시줄에 표시되었습니다.
• Windows XP: 32비트 이미지에 8비트 알파 채널이 추가되어 부드러운 반투명 가장자리가 가능해졌습니다.
• Windows Vista: 256x256 이미지와 ICO 안의 PNG 압축이 추가되었습니다.
• 2003년: image/vnd.microsoft.icon MIME 유형이 제3자에 의해 IANA에 제출되었습니다.

ICO 파일의 구조

아이콘 디렉터리(ICONDIR)

파일은 6바이트 헤더로 시작합니다. 예약 필드(0), 유형(아이콘은 1, 커서는 2), 이미지 수입니다. 그 뒤에 이미지마다 16바이트 디렉터리 항목이 이어집니다.

디렉터리 항목(ICONDIRENTRY)

크기 필드가 1바이트이므로 ICO 안의 이미지는 최대 256x256픽셀입니다.

이미지 데이터: BMP 또는 PNG

고전적인 ICO에서 각 이미지는 파일 헤더가 없는 BMP(DIB)입니다. 호닉의 문서에 따르면 컬러 이미지(XOR 마스크) 뒤에 1비트 투명도 마스크(AND 마스크)가 오기 때문에, 헤더에 저장된 높이는 두 마스크를 합친 높이, 즉 실제 높이의 두 배입니다. Windows XP부터 32비트 이미지는 알파 채널을 픽셀 데이터에 직접 담습니다.

Windows Vista부터는 항목이 BMP 대신 완전한 PNG 파일일 수도 있습니다. 특히 256x256 크기에 PNG를 내장하면 파일이 훨씬 작아집니다. MDN은 Vista 이전에는 ICO 안의 PNG가 지원되지 않았고 오래된 소프트웨어에서 문제가 될 수 있다고 지적하지만, 현재의 브라우저와 Windows 버전은 두 방식 모두 읽습니다.

어떤 크기가 필요한가요?

Windows 앱 아이콘

Microsoft의 현재 앱 아이콘 지침은 Win32 앱이 최소한 16x16, 24x24, 32x32, 48x48, 256x256을 포함해야 한다고 말합니다. Windows는 정확히 맞는 크기가 없으면 다음으로 큰 크기를 축소하며, 256픽셀 이미지가 있으면 아이콘은 항상 축소만 되고 확대되지 않습니다. 예를 들어 100% 배율에서 제목 표시줄과 상황에 맞는 메뉴는 16픽셀을, 작업 표시줄은 24픽셀을 쓰고, 200% 배율에서는 각각 32와 48이 됩니다.

웹사이트용 파비콘

웹은 다르게 작동합니다. HTML 표준에 따르면 페이지에 rel="icon" 링크가 없으면 브라우저는 사이트 루트에서 /favicon.ico를 요청할 수 있습니다. 그래서 루트에 favicon.ico를 두는 것은 여전히 좋은 관행이지만, 그것만으로는 부족합니다.

• Google 검색은 최소 8x8픽셀의 정사각형(1:1) 파비콘을 요구하며, 여러 화면에서 보기 좋도록 48x48보다 큰 파비콘을 권장합니다.
• iPhone과 iPad 홈 화면은 180x180 apple-touch-icon을 씁니다.
• Android와 PWA는 웹 앱 매니페스트에 192픽셀과 512픽셀 아이콘, 그리고 적응형 아이콘을 위한 "maskable" 버전을 기대합니다.
• 현재 브라우저는 SVG 파비콘도 지원하므로, 벡터 파일 하나로 모든 크기를 감당할 수 있습니다.

실제로는 favicon.ico 안에 16, 32, 48픽셀을 넣으면 데스크톱 브라우저와 오래된 시스템에 대응할 수 있고, 더 큰 크기는 별도 PNG 파일로 제공합니다.

운영 체제, 브라우저, 소프트웨어 지원

Windows는 ICO를 기본으로 읽고 쓰며, 탐색기, 바로 가기, 바탕 화면 모두 ICO로 작동합니다. MDN에 따르면 Chrome, Edge, Firefox, Opera, Safari가 ICO 파일을 표시합니다. macOS는 앱 아이콘에 자체 ICNS 형식을 쓰지만, 미리보기에서 ICO를 열 수 있습니다. GIMP 같은 편집기는 ICO를 크기마다 레이어 하나씩 있는 레이어 파일로 엽니다. MDN은 일반적인 웹 콘텐츠에는 ICO를 권하지 않으며, 파비콘도 <link> 요소와 PNG를 쓰는 쪽으로 옮겨 갔다고 설명합니다.

장점과 단점

자주 겪는 문제와 해결 방법

PNG 확장자를 .ico로 바꾸면 되지 않나요?

일부 브라우저는 이를 받아들이지만, 진짜 ICO가 아닙니다. 아이콘 디렉터리가 없어서 Windows는 이를 아이콘으로 인정하지 않습니다. 올바른 방법은 이미지를 실제 ICO로 변환하는 것입니다. 저희 PNG를 ICO로, JPG를 ICO로 도구는 항상 16, 32, 48픽셀 정사각형을 만들고, 이미지가 충분히 크면 64, 128, 256을 추가합니다. 각 크기는 PNG로 내장되므로 투명도가 유지됩니다.

파비콘이 흐리거나 알아보기 어렵습니다

가는 선과 작은 글자는 16픽셀에서 사라집니다. 굵고 대비가 강한 단순한 표시를 쓰고, 필요하면 로고의 심볼 부분만 쓰세요. 최소 256x256, 이상적으로는 512x512픽셀의 정사각형 원본이 가장 좋은 결과를 냅니다.

정사각형이 아닌 이미지가 찌그러지거나 늘어나 보입니다

아이콘은 정사각형입니다. 저희 도구는 이미지를 절대 늘리지 않고, 비율을 유지한 채 정사각형 가운데에 놓고 가장자리를 투명하게 남깁니다. 완벽한 정사각형을 원한다면 먼저 이미지 자르기로 정사각형 부분을 잘라 내세요.

새 파비콘이 나타나지 않습니다

브라우저는 파비콘을 오랫동안 캐시합니다. 파일 이름을 바꾸거나 버전 매개변수(/favicon.ico?v=2)를 붙이고, 서버가 올바른 MIME 유형을 돌려주는지 확인하면 대개 해결됩니다. Google 검색 결과의 아이콘은 사이트가 다시 크롤링된 뒤에야 바뀝니다.

Windows에 여전히 예전 아이콘이 보입니다

Windows는 아이콘을 별도 캐시에 보관합니다. 앱을 다시 빌드하고 바로 가기를 새로 만들거나, 로그아웃했다가 다시 로그인하면 충분한 경우가 많습니다.

변환 팁

• 웹사이트에는 ICO 하나로 부족합니다: 파비콘 생성기는 favicon.ico(16, 32, 48픽셀), favicon-48x48.png, apple-touch-icon.png(180픽셀), icon-192.png, icon-512.png, maskable용 icon-512-maskable.png, site.webmanifest를 한 번에 만들고, 원본이 SVG라면 icon.svg도 추가합니다. 페이지의 <head>에 붙여 넣을 코드도 제공합니다.
• Apple 아이콘에는 불투명한 배경이 필요합니다: iOS는 투명 영역을 검은색으로 표시하고 모서리를 스스로 둥글게 처리하므로, 파비콘 생성기는 apple-touch-icon을 선택한 배경색으로 채웁니다.
• 로고가 SVG라면: SVG를 PNG로 변환해 큰 PNG를 만든 뒤 ICO로 변환하거나, SVG를 파비콘 생성기에 바로 넣으세요.

저희 ICO와 파비콘 도구는 브라우저에서 실행됩니다. 이미지는 업로드되지 않으며 기기를 떠나지 않습니다.

자주 묻는 질문

ICO 이미지의 최대 크기는 얼마인가요?

디렉터리 항목의 너비와 높이 필드는 각각 1바이트이며, 0은 256을 뜻합니다. 따라서 ICO 안의 이미지 하나는 최대 256x256픽셀입니다.

파비콘에는 ICO와 PNG 중 무엇을 써야 하나요?

둘 다 쓰세요. 16, 32, 48픽셀을 담은 루트의 favicon.ico는 오래된 브라우저와 자동 요청에 대응하고, 현재 브라우저와 모바일 기기를 위해 PNG(필요하면 SVG) 아이콘을 <link> 태그로 선언합니다.

ICO는 투명도를 지원하나요?

네. 오래된 ICO는 1비트 마스크를 쓰고, Windows XP부터 32비트 이미지에 완전한 알파 채널이 있으며, Vista부터는 내장 PNG가 투명도를 담습니다.

ICO 파일을 PNG로 어떻게 변환하나요?

ICO를 이미지 변환기에 추가하고 대상 형식으로 PNG를 고르세요. 파일에 여러 크기가 있으면 가장 큰 것이 쓰입니다.

Mac에서도 ICO 파일을 쓰나요?

macOS는 앱 아이콘에 ICNS 형식을 씁니다. 웹사이트의 경우 favicon.ico와 PNG 아이콘은 모든 운영 체제의 브라우저에서 작동합니다.

출처

• Microsoft Learn (보관 자료): Icons, John Hornick, 1995
• Microsoft Learn: Construct your Windows app's icon
• WHATWG HTML Standard: Link type "icon"
• Google 검색 센터: 검색결과에 표시할 파비콘 정의하기
• MDN: Image file type and format guide
• Wikipedia: ICO (file format)
• Wikipedia: Favicon