목차▾
ICO 파일과 파비콘
ICO는 Windows가 아이콘을 저장할 때 쓰는 이미지 파일 형식(확장자 .ico)입니다. 일반 이미지와 달리 파일 하나에 16×16부터 256×256까지 여러 크기의 그림을 목록으로 담을 수 있고, 프로그램은 화면에 표시할 크기에 맞는 그림을 골라 씁니다. 각 그림은 비트맵(BMP) 방식이나 PNG 방식으로 저장되며, 32비트 그림은 알파 채널로 투명도를 표현합니다.
파비콘(favicon)은 favorites icon을 줄인 말로, 브라우저 탭·즐겨찾기·방문 기록·검색 결과에서 사이트 이름 옆에 보이는 작은 아이콘입니다. 웹 초창기부터 사이트 최상위 폴더에 favicon.ico를 두는 관례가 이어져 지금도 ICO가 가장 널리 쓰입니다. 최신 브라우저는 PNG·SVG 파비콘도 읽지만, RSS 리더처럼 /favicon.ico 주소만 찾아보는 프로그램도 있어 ICO 파일 하나는 두는 편이 안전합니다.
PNG를 ICO로 변환하는 방법
- PNG·JPG·WebP·SVG 이미지를 한 장 선택합니다. 256×256보다 큰 정사각형 이미지나 SVG가 가장 선명하게 나옵니다.
- ICO에 넣을 크기를 고릅니다. 파비콘은 16·32·48, 윈도우 아이콘은 16·24·32·48·256 묶음이 기본입니다.
- 직사각형 이미지라면 여백 추가와 가운데 자르기 중 하나를 고르고, 저장 방식을 정합니다.
- ICO 만들기를 누르고 크기별 미리보기를 확인한 뒤 ICO 파일을 내려받습니다.
PNG 파일의 확장자만 .ico로 바꾸면 이름만 ICO일 뿐 내용은 그대로 PNG입니다. 브라우저에 따라 내용을 보고 PNG로 읽어 주기도 하지만, Windows 아이콘처럼 ICO 구조를 기대하는 프로그램에서는 열리지 않습니다. 이 도구는 파일 앞부분의 아이콘 목록(ICONDIR)과 크기별 항목을 규격대로 기록한 실제 ICO를 만들고, 크기마다 원본을 따로 줄여 넣습니다. 크기별 그림은 PNG로도 저장할 수 있고, 결과 화면에서 HTML 코드를 복사할 수 있습니다.
파비콘에 필요한 크기
브라우저 탭의 파비콘은 CSS 기준 16px 크기로 그려집니다. 배율 200% 같은 고해상도 화면에서는 같은 자리에 실제 32픽셀이 쓰이므로 16과 32를 함께 넣어 두면 두 화면 모두에서 선명합니다. 48은 Windows 아이콘의 표준 크기 가운데 하나로, 탭보다 큰 자리에 쓰일 때를 대비해 흔히 함께 넣습니다.
| 크기 | 쓰이는 곳 | 파일 |
|---|---|---|
| 16×16 | 일반 화면의 브라우저 탭·즐겨찾기 | favicon.ico |
| 32×32 | 고해상도(배율 200%) 화면의 탭 | favicon.ico |
| 48×48 | 탭보다 큰 표시, 바로 가기 아이콘 | favicon.ico |
| 180×180 | 아이폰·아이패드 홈 화면(apple-touch-icon) | 별도 PNG |
아이폰·아이패드에서 사이트를 홈 화면에 추가할 때 쓰는 apple-touch-icon은 ICO가 아니라 180×180 PNG로 따로 준비합니다. 정사각형 원본이 있다면 사진·이미지 용량 줄이기에서 가로 180px로 줄여 PNG로 저장하면 됩니다.
구글 검색 센터는 검색 결과에 보이는 파비콘을 1:1 정사각형으로, 48×48보다 크게 만들 것을 권장합니다. 검색 결과 노출까지 신경 쓴다면 ICO에 64·128 크기를 함께 넣거나 큰 PNG 아이콘을 따로 준비해 두세요.
HTML에 파비콘 넣는 법
만든 파일의 이름을 favicon.ico로 바꿔 사이트 최상위 폴더(예: https://example.com/favicon.ico)에 올린 뒤, 페이지의 <head> 안에 다음 코드를 넣습니다.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">sizes는 ICO 안에 든 크기를 알려 주는 값으로 생략해도 동작하며, 도구 결과 화면에는 고른 크기에 맞춘 코드가 표시됩니다. 두 번째 줄은 apple-touch-icon PNG를 올린 경우에만 넣습니다. icon 링크가 없는 페이지에서도 대부분의 브라우저가 사이트 최상위의 /favicon.ico를 찾아보므로, 링크를 넣기 어려운 환경이라면 파일만 올려 두어도 파비콘이 보이는 경우가 많습니다.
/favicon.ico?v=2처럼 바꿔 새 파일로 인식시키세요.윈도우 아이콘용 ICO
Windows는 아이콘을 표시할 때 같은 크기의 그림을 먼저 찾고, 없으면 그보다 큰 그림을 줄여 씁니다. 그래서 크기를 여러 개 넣을수록 어느 화면 배율에서든 선명하게 보입니다. Microsoft는 앱 아이콘에 최소 16·24·32·48·256을 넣도록 안내하며, 256이 있으면 아이콘을 확대할 일이 없어집니다. 도구의 윈도우 아이콘 16~256 묶음이 이 조합입니다.
| Windows 11 화면 배율 | 100% | 150% | 200% |
|---|---|---|---|
| 제목 표시줄·알림 영역·오른쪽 클릭 메뉴 | 16 | 24 | 32 |
| 작업 표시줄·검색 결과 | 24 | 36 | 48 |
| 시작 메뉴 고정 | 32 | 48 | 64 |
만든 ICO는 바로 가기나 폴더 아이콘을 바꿀 때 바로 쓸 수 있습니다. 바로 가기는 오른쪽 클릭 → 속성 → 바로 가기 탭 → 아이콘 변경에서, 폴더는 오른쪽 클릭 → 속성 → 사용자 지정 탭 → 아이콘 변경에서 찾아보기를 눌러 .ico 파일을 고릅니다. 아이콘 파일을 옮기거나 지우면 연결이 끊기므로 따로 보관할 폴더에 두고 선택하세요.
BMP 항목과 PNG 항목
ICO 안의 그림은 두 가지 방식으로 저장할 수 있습니다. BMP 방식은 압축하지 않은 32비트 픽셀과 1비트 투명 마스크를 저장하는 오래된 방식이라 거의 모든 프로그램이 읽습니다. PNG 방식은 Windows Vista에서 추가된 방식으로, 256×256처럼 큰 그림도 작은 용량으로 담을 수 있습니다. Microsoft 아이콘 가이드는 256×256 그림만 압축해 파일 크기를 줄이라고 권장합니다.
| 항목 | 호환 우선(기본) | 용량 우선 |
|---|---|---|
| 16~128px | BMP(32비트 + 투명 마스크) | PNG |
| 256px | PNG | PNG |
| 16·32·48 파일 크기 | 약 15KB(고정) | 그림에 따라 보통 몇 KB |
| 읽을 수 있는 곳 | 오래된 프로그램까지 | Windows Vista 이후, 최신 브라우저 |
BMP 방식은 그림 내용과 관계없이 크기가 정해져 16px은 1,128바이트, 32px은 4,264바이트, 48px은 9,640바이트이고, 256px을 BMP로 저장하면 약 264KB가 됩니다. 웹사이트 파비콘처럼 브라우저에서만 쓴다면 용량 우선도 괜찮고, 프로그램 아이콘이나 오래된 소프트웨어에서 쓸 아이콘은 호환 우선이 무난합니다. 두 방식 모두 알파 채널로 투명 배경을 유지합니다.
정사각형 맞추기와 작은 크기 선명도
아이콘은 정사각형이라 직사각형 이미지는 맞추는 방식을 골라야 합니다. 여백 추가는 그림 전체를 가운데에 넣고 남는 위아래나 좌우를 투명하게 둡니다. 가로로 긴 로고는 그만큼 작아집니다. 가운데 자르기는 짧은 변에 맞춰 가운데를 잘라 꽉 채우므로 가장자리가 잘립니다. 특정 부분만 남기고 싶다면 사진 자르기에서 1:1 비율로 원하는 영역을 먼저 잘라 오세요.
이 도구는 큰 원본을 한 번에 줄이지 않고 절반씩 나눠 줄여 계단 현상을 줄이고, 크기마다 픽셀 경계에 맞춰 따로 그립니다. 그래도 16px에서는 큰 그림의 세부가 뭉개지기 쉽습니다. Microsoft 아이콘 가이드도 256px 그림을 단순히 줄이는 것만으로는 작은 아이콘이 잘 보이지 않는다고 설명합니다.
- 로고 속 긴 글자나 가는 선은 16px에서 거의 읽히지 않으므로 심볼만 쓰거나 선을 굵게 만든 원본을 씁니다.
- 원본의 바깥 여백을 줄이면 같은 칸 안에서 그림이 커져 알아보기 쉽습니다.
- 원본이 고른 크기보다 작으면 확대되어 흐릿해집니다. 256px 이상 원본이나 SVG를 쓰는 편이 좋습니다.
자주 묻는 질문
PNG를 ICO로 바꾸려면 어떻게 하나요?▾
이미지를 한 장 선택하고 넣을 크기(기본 16·32·48)를 고른 뒤 ICO 만들기를 누르면 여러 크기가 들어간 .ico 파일 하나가 만들어집니다. JPG·WebP·SVG도 같은 방법으로 변환되며, 설치나 회원가입 없이 브라우저 안에서 처리됩니다.
파비콘은 몇 픽셀로 만들어야 하나요?▾
favicon.ico에는 16×16, 32×32, 48×48을 함께 넣는 조합이 널리 쓰입니다. 브라우저 탭 아이콘은 일반 화면에서 16px, 배율 200% 화면에서 32px로 그려집니다. 아이폰·아이패드 홈 화면용 apple-touch-icon은 ICO가 아니라 180×180 PNG로 따로 준비합니다.
ICO 파일 하나에 여러 크기가 들어가나요?▾
네. ICO는 파일 안에 최대 256×256까지 여러 크기의 이미지를 목록으로 담는 형식이라, 브라우저나 Windows가 표시할 크기에 알맞은 이미지를 골라 씁니다. 이 도구는 고른 크기마다 이미지를 따로 줄여 한 파일에 넣습니다.
256×256 크기는 왜 넣나요?▾
Windows 탐색기의 큰 아이콘 보기와 고해상도 화면을 위한 크기입니다. Microsoft는 앱 아이콘에 최소 16·24·32·48·256을 넣도록 안내하며, 256이 있으면 Windows가 아이콘을 확대하지 않고 줄여서만 쓸 수 있습니다. 파비콘만 만든다면 꼭 넣지 않아도 됩니다.
가로세로 비율이 다른 이미지도 되나요?▾
됩니다. 아이콘은 정사각형이라 전체를 넣고 남는 곳을 투명하게 두는 여백 추가와, 짧은 변에 맞춰 가운데를 잘라 꽉 채우는 가운데 자르기 중 하나를 고릅니다. 원하는 부분만 정확히 남기려면 먼저 1:1 비율로 잘라 두는 편이 좋습니다.
투명 배경이 유지되나요?▾
네. PNG·WebP·SVG의 투명한 부분은 ICO에서도 투명하게 남습니다(32비트 알파 채널). JPG는 원래 투명 영역이 없는 형식이라 배경색이 그대로 들어갑니다.
호환 우선과 용량 우선은 무엇이 다른가요?▾
호환 우선은 256×256만 PNG로 압축하고 나머지 크기는 압축하지 않은 BMP 방식으로 저장하는 Windows 권장 방식이라 오래된 프로그램에서도 읽힙니다. 용량 우선은 모든 크기를 PNG로 압축해 파일이 작아지며, Windows Vista 이후와 최신 브라우저에서 읽을 수 있습니다.
파비콘을 바꿨는데 예전 아이콘이 계속 보여요.▾
브라우저가 파비콘을 따로 오래 저장해 두기 때문에 파일을 바꿔도 한동안 예전 아이콘이 보일 수 있습니다. 캐시를 지우거나 새 창에서 확인하고, 그래도 그대로라면 href를 /favicon.ico?v=2처럼 바꿔 새 파일로 인식시키는 방법을 씁니다.
SVG로도 ICO를 만들 수 있나요?▾
네. SVG는 벡터 그림이라 크게 그린 뒤 크기별로 줄이므로 작은 크기도 선명합니다. 다만 width·height나 viewBox가 없는 SVG는 크기를 알 수 없어 변환할 수 없고, SVG 안에서 외부 이미지나 글꼴을 불러오는 부분은 그려지지 않습니다.
이미지가 서버로 업로드되나요?▾
아니요. 이미지를 읽고 크기별로 줄여 ICO 파일로 묶는 과정이 모두 현재 브라우저 안에서 진행되며 파일이 서버로 전송되지 않습니다.
ICO 구조와 권장 크기는 Microsoft Learn의 아이콘 문서, 파비콘 크기 권장은 Google 검색 센터 문서를 기준으로 작성했습니다(2026년 9월 확인). 브라우저와 운영체제에 따라 ICO에서 고르는 크기는 다를 수 있습니다.