# 이미지를 ICO로 — 파비콘, 윈도우와 맥 아이콘 만들기

그림 하나를 넣으면, 브라우저와 윈도우와 맥이 요구하는 모든 크기가 나옵니다.

> PNG, JPEG, SVG를 브라우저에서 여러 크기가 담긴 진짜 .ico나 macOS .icns로 바꿉니다. 파비콘, 윈도우 앱 아이콘, 맥 앱 아이콘에 더해 웹사이트에 필요한 애플과 안드로이드 파일까지. 아무것도 업로드되지 않습니다.

이 페이지는 브라우저 안에서만 동작하는 대화형 도구입니다(https://abox.tools/ko/파비콘-만들기/). 도구에 넘긴 어떤 것도 업로드되지 않습니다. 아래는 이 페이지가 도구에 대해 글로 설명하는 내용 전부입니다. 도구를 쓰려면 이 주소를 여세요.

## 이미지 파일은 **절대 업로드되지 않습니다**. 서버가 아예 없으니까요.

크기 조절도 아이콘 파일 자체도 내 브라우저에서 만들어집니다. 그림은 브라우저가 이미 갖고 있는 캔버스가 그리고, 윈도우의 `.ico`와 macOS의 `.icns`는 누구나 읽어 볼 수 있는 `src/ico.js`와 `src/icns.js`의 수백 줄이 그 픽셀로 조립합니다. 이 도구에는 네트워크 기능이 하나도 없어서 가져올 것도 보낼 것도 없고, 설령 보내려 해도 이 페이지 반대편에는 로고를 받아 줄 서버 자체가 없습니다.

- ✗ 업로드 없음
- ✗ 가입 없음
- ✗ 워터마크 없음
- ✓ 오프라인 동작
- ✓ 오픈 소스

## 아무것도 업로드하지 않고 .ico 파일 만드는 방법

1. **그림을 고릅니다.** PNG, JPEG, WebP, SVG를 선택 영역에 끌어다 놓거나, 여러 장을 골라 한 번에 변환하세요. 정사각형이 가장 편하고, 256픽셀 이상이면 모든 크기를 만들기에 충분합니다. 브라우저가 디스크에서 곧바로 읽고, 그동안 어디로도 아무것도 나가지 않습니다.
2. **필요한 파일을 고릅니다.** 윈도우와 브라우저는 `.ico`를 읽고, 맥은 `.icns`를 읽으며 다른 쪽은 쳐다보지도 않습니다. 필요한 쪽을, 양쪽에 배포한다면 둘 다 체크하세요. 웹사이트라면 애플과 안드로이드, 타일 이미지도 필요한데 그게 세 번째 항목입니다.
3. **아이콘의 용도를 말합니다.** 웹사이트 파비콘은 16, 32, 48픽셀입니다. 윈도우 프로그램은 256도 필요하고요. 고해상도 노트북에서 제대로 보여야 하는 프로그램이라면 윈도우가 125%와 150% 배율에서 요구하는 중간 크기들도 필요합니다. 하시는 일에 맞는 것을 고르거나 크기를 직접 체크하세요. 목록의 모든 크기에는 무엇이 그 크기를 요구하는지가 적혀 있습니다. `.icns`에는 그런 선택이 없습니다. 애플이 정확히 열 개의 슬롯을 정해 두었고 열 개 전부가 들어갑니다.
4. **모양과 배경을 정합니다.** 아이콘은 정사각형인데 로고는 대개 아닙니다. 여백을 넣으면 그림 전체가 위아래 공간과 함께 남고, 잘라내면 가운데가 남고, 늘이면 찌그러집니다. 투명한 부분은 뒤에 놓을 색을 고르지 않는 한 투명한 채로 유지됩니다.
5. **내려받기 전에 16픽셀짜리를 봅니다.** 아이콘이 가장 자주 보이는 크기이자, 가는 선과 작은 글자가 사라지는 크기입니다. 미리보기의 모든 사각형은 만들어진 파일에서 실제 크기 그대로 그려집니다. 가장 작은 것이 뭉개져 있다면 답은 다른 설정이 아니라 더 단순한 그림입니다.
6. **파일을 가져갑니다.** 모든 크기가 들어 있는 .ico 하나가 나오고, 그렇게 요청하셨다면 이름은 `favicon.ico`입니다. 브라우저가 찾아가는 주소가 그것이니까요. macOS 아이콘을 체크했다면 맥 애플리케이션 번들에 바로 넣을 수 있는 .icns가 그 옆에 놓입니다. 웹사이트 세트까지 체크하면 애플과 안드로이드, 윈도우 타일 이미지와 매니페스트, 그리고 페이지에 붙여 넣을 HTML 덩어리도 함께 나옵니다. 파일이 하나를 넘으면 zip 하나로 내려옵니다.

## 자세한 설명

[16픽셀에서도 읽히는 파비콘 만드는 방법](https://abox.tools/ko/가이드/파비콘-만드는-법/): favicon.ico에 실제로 필요한 크기, 아이폰과 안드로이드와 맥이 따로 요구하는 파일, 그리고 포스터에서 멀쩡한 로고가 16픽셀에서 사라지는 이유.

## 상자 속 다른 도구

- [이미지를 데이터 URI로](https://abox.tools/ko/이미지-base64-변환/): 사진 전체를 텍스트 한 줄로. CSS나 HTML에 그대로 붙여 넣으세요.
- [SVG를 이미지로](https://abox.tools/ko/svg-png-변환/): 크기를 말하세요. 벡터에는 잃어버릴 자기 크기가 없습니다.
- [이미지를 SVG로](https://abox.tools/ko/이미지-svg-변환/): 형태 하나, 윤곽선 하나. 있으면 안 되는 것은 가리키기만 하세요.
- [키 비교 차트](https://abox.tools/ko/키-비교/): 키를 적으면 그림을 가져갑니다. 그리려고 어디로도 보내지 않습니다.

## 자주 묻는 질문

### 제 이미지가 어딘가로 업로드되나요?

아닙니다. 그림을 디코딩하고 크기를 바꾸는 일은 내 기기에서 도는 내 브라우저가 하고, .ico는 이 페이지가 제공한 코드가 그 픽셀로 조립합니다. 이 도구에는 네트워크 기능이 하나도 없어서 무언가를 가져오지도, 보내지도 않습니다. 이 페이지의 `Content-Security-Policy`에 연결해도 되는 주소가 전부 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다.

### favicon.ico에는 어떤 크기가 들어가야 하나요?

16, 32, 48입니다. 취향의 문제가 아닙니다. 16은 브라우저가 탭에 그리는 크기, 32는 윈도우가 바탕화면 바로 가기에 쓰고 여러 브라우저가 즐겨찾기에 쓰는 크기, 48은 구글이 사이트 아이콘을 읽는 크기입니다. 그보다 큰 것은 .ico 안이 아니라 그 옆의 PNG로 있어야 하고, 여기 웹사이트 세트가 만들어 주는 것이 바로 그 PNG들입니다.

### 윈도우 프로그램 아이콘에는 어떤 크기가 필요한가요?

16, 32, 48, 256입니다. Visual Studio가 기본으로 주는 app.ico에 들어 있는 구성이기도 합니다. 16은 제목 표시줄과 탐색기의 작은 보기, 32는 바탕화면과 작업 표시줄, 48은 탐색기의 보통 아이콘, 256은 시작 메뉴와 아주 큰 보기입니다. 고해상도 화면에서는 윈도우가 20, 24, 40, 64, 96도 요구하고, 없으면 가장 가까운 크기에서 다시 샘플링합니다. "모든 배율" 프리셋이 그 크기들을 넣어 줍니다.

### 왜 원본 그림보다 파일이 커졌나요?

.ico는 그림 하나가 아니라 여럿이고, 작은 것들은 무엇이든 읽을 수 있도록 압축하지 않고 저장하기 때문입니다. 32x32 항목은 안에 무엇이 들었든 정확히 4,264바이트이고, 압축하지 않은 256x256 항목은 264KB입니다. 그래서 64를 넘는 크기는 기본으로 PNG로 저장합니다. "모든 크기를 PNG로"를 고르면 가장 작은 파일이 나오고, 모든 크기를 압축 없이 고르면 가장 호환성 좋은 파일이 나옵니다.

### PNG 항목과 압축하지 않은 항목은 무엇이 다른가요?

.ico 안에서 픽셀을 어떻게 저장하느냐만 다릅니다. 압축하지 않은 항목은 원래의 윈도우 방식으로, 비트맵 헤더와 위아래가 뒤집힌 픽셀과 1비트 투명 마스크로 이루어져 있고 지금까지 나온 모든 윈도우가 읽을 수 있습니다. PNG 항목은 아이콘 안에 PNG 파일 하나를 통째로 넣은 것으로, 큰 크기에서 3~10배 작지만 윈도우 비스타부터 이해합니다. 기본값은 각자가 유리한 곳에 씁니다. 64픽셀까지는 압축 없이, 그 위는 PNG로.

### 256픽셀보다 큰 아이콘도 만들 수 있나요?

못 합니다. 어떤 도구도 못 합니다. 이 형식은 한 변을 1바이트로 저장하는데 0은 이미 임자가 있습니다. 256을 뜻하거든요. 그게 천장이라, 512픽셀 이미지가 든 .ico는 더 큰 아이콘이 아니라 망가진 아이콘입니다. 512가 필요하다면 실은 PNG가 필요한 것이고, 웹사이트 세트가 안드로이드용과 웹 앱 스플래시 화면용으로 넣어 주는 것이 바로 그것입니다.

### 투명한 부분이 유지되나요?

두 종류의 항목 모두에서 유지되고, 알파 채널 옆에 예전의 1비트 마스크도 함께 씁니다. 알파를 읽기에는 너무 오래된 소프트웨어도 검은 상자를 그리는 대신 아이콘을 제대로 오려 내도록요. 일부러 불투명하게 만드는 파일은 하나, 웹사이트 세트의 애플 터치 아이콘입니다. iOS가 그걸 자기 타일 위에 합성하면서 투명한 부분을 검게 만들기 때문에, 고르신 배경색(기본은 흰색) 위에 미리 눌러 놓습니다.

### 제 로고는 가로로 긴 워드마크입니다. 어떻게 되나요?

무언가는 일어나야 합니다. 아이콘은 정사각형이니까요. 여백을 넣으면 전부 남지만 작아집니다. 워드마크를 16픽셀 정사각형에 여백까지 넣으면 글자 높이가 3픽셀쯤 되어 읽을 수 없습니다. 가운데를 잘라 쓰는 편이 대개 낫습니다. 로고 묶음에서 심벌만 떼어 쓰는 것, 거의 모든 브랜드가 파비콘에 하는 방식이지요. 무엇이 살아남는지는 아무것도 내려받기 전에 미리보기가 보여 줍니다.

### 웹사이트 세트에는 무엇이 들어 있고, 전부 필요한가요?

PNG 일곱 장, 웹 앱 매니페스트, browserconfig.xml, 그리고 붙여 넣을 HTML 덩어리입니다. 필요합니다. .ico는 브라우저와 윈도우까지만 감당하니까요. 아이폰 홈 화면은 자기만의 이름을 가진 180픽셀 PNG를 읽고, 안드로이드와 모든 설치 안내는 매니페스트를 읽으며, 시작 메뉴에 고정한 타일은 XML을 읽습니다. 그중 어느 것도 .ico 안을 들여다보지 않습니다. 전부 여기, 내 기기에서 만들어지고, zip 안에 각 파일이 무엇을 위한 것인지 적은 메모가 들어 있습니다.

### macOS 아이콘도 만들 수 있나요?

됩니다. *macOS 아이콘*을 체크하면 `.ico` 옆에, 또는 대신에 `.icns`가 나옵니다. 같은 발상을 담은 다른 컨테이너이고, 두 체계는 서로의 것을 읽지 않습니다. 윈도우는 .ico를, 맥 애플리케이션 번들은 .icns를 원합니다. 크기는 고를 수 없습니다. 애플이 정확히 열 개의 슬롯을 공표해 두었기 때문입니다. 16, 32, 64, 128, 256, 512, 1024픽셀이고 그중 셋은 아래 크기의 레티나 버전으로 한 번 더 등장합니다. 일곱 번 그린 것으로 열 개를 전부 채우는데, .icns가 더 큰 파일인 이유이기도 합니다.

### .icns 파일은 어떻게 쓰나요?

애플리케이션이라면 번들의 `YourApp.app/Contents/Resources/`에 넣고 `Info.plist`의 `CFBundleIconFile`에 이름을 적습니다. 맥 패키징 도구에는 전부 그 항목이 있습니다. 그 밖의 경우라면 Finder에서 파일을 고르고 Command-C를 누른 다음, 바꾸려는 폴더나 디스크 이미지에서 정보 가져오기를 열고 왼쪽 위의 작은 아이콘을 클릭한 뒤 Command-V를 누르세요.

### 이 .icns는 iconutil이 만드는 것과 같은가요?

같은 열 개의 슬롯에 같은 네 글자 타입, 각각에 PNG가 들어갑니다. `iconutil`이 `.iconset` 폴더로부터 만들어 내는 것과 같습니다. 일부러 다르게 한 점이 하나 있습니다. 애플의 도구는 뒤따르는 타입과 길이의 색인인 `TOC` 요소도 함께 씁니다. 형식의 일부라기보다 최적화에 가깝고, 색인이 없으면 리더가 요소를 처음부터 끝까지 훑어 같은 답에 이릅니다. 그런데 틀린 색인은 색인이 없느니만 못하므로 넣지 않습니다.

### 그림 여러 장을 한 번에 변환할 수 있나요?

됩니다. 목록의 모든 그림이 같은 설정으로 각자의 .ico가 되고, 묶음은 그림 하나당 폴더 하나가 든 zip으로 내려옵니다. 그러지 않으면 둘 다 favicon.ico가 되어 하나가 다른 하나를 덮어쓸 테니까요. 체크한 모든 결과물이 모든 그림에 대해 만들어집니다. 아무 줄이나 누르면 그 그림이 미리보기에 올라옵니다.

### 무료인가요? 가입해야 하나요?

무료이고 계정도, 로그인도, 체험판도, 워터마크도 없습니다. 파일 개수나 용량 제한도 없습니다. 그 값을 치를 서버가 없으니까요. 작업은 내 기기에서 일어납니다. 이 사이트는 광고로 유지되는데, 그 광고에도 내 이미지에 관한 것은 넘어가지 않습니다.

### 오프라인에서도 되나요?

됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 로고를 어딘가로 보내서 변환하는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요.

## 이 약속을 직접 확인하는 방법

- **로고는 나갈 곳이 없습니다.** 이 페이지가 연결해도 되는 주소는 Content-Security-Policy에 모두 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 파일이 모일 만한 수신 지점이 없고, 설령 있더라도 거기로 파일을 보낼 코드가 없습니다.
- **여기서는 아무것도 가져오지 않습니다.** `src/` 어디에도 `fetch`도, `XMLHttpRequest`도, `sendBeacon`도 없습니다. 크기 조절은 캔버스 위의 `drawImage`이고, 각 아이콘은 이 페이지 안의 `src/ico.js`나 `src/icns.js`가 그 픽셀 앞에 헤더를 써 넣은 것입니다.
- **파일 설명은 그 파일의 바이트에서 나옵니다.** 완성된 아이콘 옆에 적힌 크기 목록은 요청하신 크기 목록이 아닙니다. 방금 쓴 파일에서 `readIcoDirectory`나 `readIcnsElements`가 다시 읽어 낸 것입니다. 그래서 쓰는 쪽이 설정과 어긋나면 페이지가 그 자리에서 말해 줍니다. 윈도우가 아무것도 그리지 않고 macOS가 백지를 그린 뒤에야 알게 되는 대신에요.
- **구글이 불러오는 것과, 구글에게 주지 않는 것.** 광고와 측정 스크립트는 구글에서, 후원 버튼은 Buy Me a Coffee에서 옵니다. 어느 쪽에도 내 그림에 관한 것은 넘어가지 않습니다. 파일을 읽고 크기를 바꾸고 쓰는 코드는 한 줄도 빠짐없이 이 출처에서 제공되고 저장소에 공개되어 있습니다.
- **오프라인에서도 동작합니다.** 네트워크를 끊어도 도구는 그대로입니다. 애초에 네트워크를 쓰는 단계가 없었으니까요. 가장 간단한 증거입니다.

**직접 확인해 보세요.** 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 `dist` 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다: https://github.com/A-Box-of-Tools/website

먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 `config/site.toml`, 두 아이콘 형식은 `src/ico.js`와 `src/icns.js`에 있습니다. 한쪽에는 디렉터리와 항목과 마스크가, 다른 쪽에는 애플이 정한 열 개의 슬롯이 들어 있고요. 페이지의 모든 크기가 어디서 왔는지는 `src/sizes.js`에 적혀 있습니다.