위에서 파일을 고르면 바로 열립니다.준비됨 — 인터넷을 끊어도 이대로 동작합니다.이 브라우저에서는 쓸 수 없습니다 (나머지는 그대로 동작합니다).오프라인 저장에는 https:// 또는 localhost가 필요합니다.여기서는 저장할 수 없지만, 어느 쪽이든 올라가는 것은 없습니다.파일은 어디로도 가지 않았습니다. 파일 {total}개를 불러왔고 모두 이 사이트의 것입니다. {platform}무언가가 {hosts}에 접속했는데, 이 도구는 절대 그러지 않습니다. 살펴볼 만합니다. {platform}광고와 측정과 후원 버튼을 위한 이 사이트 자신의 스크립트가 호스트 {hosts}곳에서 왔습니다. 그중 어느 쪽도 파일이나 그 1바이트도 받지 않았습니다.광고와 측정과 후원 버튼을 위한 이 사이트 자신의 스크립트가 호스트 {hosts}곳에서 왔습니다. 그중 어느 쪽도 파일이나 그 1바이트도 받지 않았습니다.문제가 생겼습니다: {detail}. 처음부터 다시 하려면 페이지를 새로 고치세요.파일 {count}개를 읽는 중…파일 {count}개를 읽는 중…예시로 해 보기예시를 만드는 중…이 브라우저에서는 예시를 만들지 못했습니다. 대신 파일을 골라 주세요.
크기 조절도 아이콘 파일 자체도 내 브라우저에서 만들어집니다. 그림은 브라우저가 이미 갖고 있는 캔버스가 그리고, 윈도우의 .ico와 macOS의 .icns는 누구나 읽어 볼 수 있는 src/ico.js와 src/icns.js의 수백 줄이 그 픽셀로 조립합니다. 이 도구에는 네트워크 기능이 하나도 없어서 가져올 것도 보낼 것도 없고, 설령 보내려 해도 이 페이지 반대편에는 로고를 받아 줄 서버 자체가 없습니다.
✗ 업로드 없음
✗ 가입 없음
✗ 워터마크 없음
✓ 오프라인 동작
✓ 오픈 소스
실시간 확인:확인 중…
오프라인:확인 중…
그냥 믿지 마시고 직접 확인해 보세요. 개발자 도구의 '네트워크' 탭을 켜 놓고 아이콘을 만들어 보십시오. 이미지도, 미리보기도, 파일 이름도, 고른 파일의 단 1바이트도 실려 나가는 요청이 없습니다. 아니면 인터넷을 끊고 그냥 만들어 보셔도 됩니다.
이 약속을 직접 확인하는 방법
로고는 나갈 곳이 없습니다. 이 페이지가 연결해도 되는 주소는 Content-Security-Policy에 모두 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 파일이 모일 만한 수신 지점이 없고, 설령 있더라도 거기로 파일을 보낼 코드가 없습니다.
여기서는 아무것도 가져오지 않습니다.src/ 어디에도 fetch도, XMLHttpRequest도, sendBeacon도 없습니다. 크기 조절은 캔버스 위의 drawImage이고, 각 아이콘은 이 페이지 안의 src/ico.js나 src/icns.js가 그 픽셀 앞에 헤더를 써 넣은 것입니다.
파일 설명은 그 파일의 바이트에서 나옵니다. 완성된 아이콘 옆에 적힌 크기 목록은 요청하신 크기 목록이 아닙니다. 방금 쓴 파일에서 readIcoDirectory나 readIcnsElements가 다시 읽어 낸 것입니다. 그래서 쓰는 쪽이 설정과 어긋나면 페이지가 그 자리에서 말해 줍니다. 윈도우가 아무것도 그리지 않고 macOS가 백지를 그린 뒤에야 알게 되는 대신에요.
구글이 불러오는 것과, 구글에게 주지 않는 것. 광고와 측정 스크립트는 구글에서, 후원 버튼은 Buy Me a Coffee에서 옵니다. 어느 쪽에도 내 그림에 관한 것은 넘어가지 않습니다. 파일을 읽고 크기를 바꾸고 쓰는 코드는 한 줄도 빠짐없이 이 출처에서 제공되고 저장소에 공개되어 있습니다.
오프라인에서도 동작합니다. 네트워크를 끊어도 도구는 그대로입니다. 애초에 네트워크를 쓰는 단계가 없었으니까요. 가장 간단한 증거입니다.
직접 확인해 보세요. 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 dist 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다:
먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 config/site.toml, 두 아이콘 형식은 src/ico.js와 src/icns.js에 있습니다. 한쪽에는 디렉터리와 항목과 마스크가, 다른 쪽에는 애플이 정한 열 개의 슬롯이 들어 있고요. 페이지의 모든 크기가 어디서 왔는지는 src/sizes.js에 적혀 있습니다.
회사 보안 소프트웨어가 업로드를 경고한다면. 그것은 브라우저에서 파일이 선택되는 순간을 지켜보며, 페이지가 그것을 보낼 생각인지는 알 수 없습니다 — 그래서 고르는 순간에 경고합니다. 여기서는 아무것도 보내지 않습니다. 브라우저 개발자 도구를 열고 네트워크 탭으로 옮긴 뒤 파일을 골라 보세요. 그것을 실어 나르는 요청은 없고, 이 페이지 자체의 로컬 미리보기 말고는 요청 자체가 없습니다. 같은 확인을 IT 팀도 삼십 초면 할 수 있습니다.
1 그림 고르기
2 아이콘의 용도 말하기
아이콘 파일은 그림 하나가 아니라 여럿입니다. 같은 로고를, 그걸 읽는 쪽이 요구하는 크기마다 다시 그려 넣은 것이죠. 그 크기가 무엇인지는 취향의 문제가 아닙니다. 브라우저는 셋을 원하고, 고해상도 노트북의 프로그램은 열을 원하며, 맥은 자기만의 열을 원하고, 윈도우 비스타 이전에 만들어진 것은 아예 다른 방식으로 저장되기를 원합니다.
윈도우 아이콘: .ico 모든 브라우저가 파비콘으로 읽고, 윈도우가 프로그램과 바로 가기, 폴더에 씁니다. 크기는 아래에서 직접 고릅니다.
macOS 아이콘: .icns 맥 애플리케이션 번들이 싣고 다니는 것입니다. 애플이 16픽셀부터 1024픽셀까지 정확히 열 개의 슬롯을 정해 두어 고를 것이 없습니다. 열 개가 전부 들어가는데, 레티나 슬롯과 그 위 크기가 같은 그림이라 일곱 번만 그리면 됩니다.
웹사이트 아이콘 세트의 나머지 .ico는 브라우저 탭과 윈도우까지만 감당합니다. 아이폰 홈 화면, 안드로이드 설치 안내, 시작 메뉴에 고정한 타일은 감당하지 못합니다. 그쪽은 180px PNG와 웹 앱 매니페스트, XML 파일을 읽는데, 어느 것도 .ico 안을 들여다보지 않으니까요. 이걸 체크하면 그 전부와 매니페스트, 그리고 페이지에 붙여 넣을 HTML 덩어리까지 받습니다.
3 실제로 보일 크기에서 확인하기
아무것도 내려받기 전에 볼 만한 대목입니다. 512픽셀에서 완벽하게 읽히는 로고도 브라우저 탭에서는 가로 16픽셀입니다. 그 안의 가는 부분, 그러니까 워드마크의 획이나 머리카락 같은 테두리, 그라데이션은 그 크기를 견디지 못합니다. 아래의 모든 사각형은 고르신 파일에서 실제 크기 그대로 그려집니다.
완성
<head>에 이것을 붙여 넣으세요
{name}: 이 도구가 읽을 수 있는 이미지가 아닙니다.{name}: 이 브라우저가 디코딩하지 못했습니다.이 브라우저가 사진을 디코딩하지 못했습니다.이 브라우저가 PNG 쓰기를 거부했습니다.아이콘에는 이미지가 최소 한 장은 있어야 합니다.아이콘 이미지의 너비가 0픽셀일 수는 없습니다.{size}는 .ico에 들어가지 않습니다. 이 형식은 각 변을 1바이트에 담기 때문에 256이 가장 큽니다.픽셀 버퍼가 스스로 밝힌 크기와 맞지 않습니다..ico가 아닙니다. 헤더를 담기에도 짧습니다..ico가 아닙니다. 타입 필드가 1이 아닙니다.디렉터리가 파일 끝을 넘어갑니다.한 항목이 파일 끝 너머를 가리킵니다.아이콘에는 이미지가 최소 한 장은 있어야 합니다.“{type}”은 네 글자짜리 icns 타입이 아닙니다..icns가 아닙니다. 헤더를 담기에도 짧습니다..icns가 아닙니다. 서명이 “icns”가 아닙니다.헤더는 {claimed}바이트라고 하고 파일은 {actual}입니다.한 요소가 파일 끝을 넘어갑니다.{type} 요소가 이 파일에 담기지 않는 길이를 밝히고 있습니다.{n}바이트{n} KB{n} MB이미지 1장이미지 {n}장크기 1개크기 {n}개칸 1개칸 {n}개{a}, {b}{a}과 {b}{a}, {b}{size} · {bytes} · 정사각형{size} · {bytes} · 정사각형 아님이것을 미리보기에 띄우기{name}을 목록에서 빼기브라우저 탭, 주소 표시줄, 그리고 탐색기의 작은 아이콘125%에서의 윈도우 목록 보기150%에서의 윈도우 작업 표시줄바탕 화면, 작업 표시줄, 그리고 브라우저의 즐겨찾기 막대125%에서의 바탕 화면탐색기의 보통 아이콘, 그리고 구글이 파비콘을 읽는 크기200%에서의 탐색기, 그리고 Alt-Tab 전환 화면탐색기의 큰 아이콘옛 특대 크기. 설치 프로그램은 지금도 읽습니다탐색기의 아주 큰 아이콘과 시작 메뉴. .ico가 담을 수 있는 가장 큰 크기입니다웹사이트 파비콘사이트 루트에 두는 그 고전적인 favicon.ico입니다. 세 크기가 관례의 전부입니다. 탭에 16, 즐겨찾기와 윈도우 바로 가기에 32, 48은 구글이 사이트 아이콘을 그 크기로 읽기 때문입니다.윈도우 응용 프로그램 아이콘.exe나 바로 가기가 원하는 것이자, 비주얼 스튜디오 자신의 app.ico에 들어 있는 것입니다. 셸의 세 크기에, 시작 메뉴와 탐색기의 아주 큰 보기가 가져다 쓰는 256을 더한 것입니다.윈도우 응용 프로그램, 모든 배율같은 아이콘에, 윈도우가 125%, 150%, 200% 화면 배율에서 요구하는 중간 크기들을 더한 것입니다. 파일은 더 크지만, 고해상도 노트북에서 조용히 다시 샘플링되지 않는 유일한 판이기도 합니다.호환성 최우선세 크기를, 모두 비스타 이전 방식으로 저장합니다. 설치 프로그램, 임베디드 기기, 그리고 .ico를 직접 읽으면서 그 안의 PNG가 무엇인지는 모르는 오래된 셸 도구들을 위해서입니다.크기를 직접 고르기이 형식이 담을 수 있는 모든 크기입니다. 전부 체크하는 것이 정답인 경우는 드뭅니다. 하나하나가 온전한 그림이고, 아무도 요구하지 않은 크기는 아무것도 읽지 않으니까요.{list} px아래에서 체크한 것들체크된 것이 없어서 만들 것이 없습니다.체크된 크기가 없어서 .ico 안이 비게 됩니다. 크기를 하나 체크하거나, 다른 출력을 고르세요.그림 한 장당: {parts}.그림 한 장당: {parts}. .icns는 1024픽셀까지 그리므로 큰 쪽입니다. 맥이 요구하는 것이 그것입니다.{count}을 담은 .ico 하나애플의 {n}개 칸을 모두 담은 .icns 하나PNG {n}장과 웹사이트에 필요한 텍스트 파일 세 개체크된 것이 없어서 파일 안이 비게 됩니다.크기를 최소 하나는 체크하세요.{count} — {list} — {kind}. 이미 정사각형이 아닌 그림은 {fit}.64픽셀까지는 비스타 이전 방식으로, 그 위는 PNG로 저장합니다모든 크기를 PNG로 저장합니다모든 크기를 비스타 이전 방식으로 저장합니다여백을 넣어 정사각형으로 만들고, 그 여백은 투명하게 둡니다배경색 여백을 넣어 정사각형으로 만듭니다가운데 정사각형만 잘라냅니다정사각형으로 늘입니다{n}개는 압축 없이, 정확히 {size}가 됩니다{n}개는 PNG로, 크기는 그림에 따라 다릅니다{parts}. {tail}파일 안에 압축된 것이 하나도 없어서 무엇으로든 열립니다. 윈도우 비스타보다 오래된 소프트웨어에서도 그렇습니다.모든 항목이 PNG입니다. .ico가 도달할 수 있는 가장 작은 형태이지만, 윈도우 XP와 몇몇 설치 프로그램은 읽지 못합니다.작은 크기는 무엇이든 읽을 수 있도록 예전 방식으로, 큰 크기는 PNG로 저장합니다. 아끼는 몫이 거기에 있으니까요.{name}은 {size}이라 정사각형이 아니고, 아이콘은 늘 정사각형입니다. 가운데 정사각형을 가져가므로 양끝이 잘려 나갑니다.{name}은 {size}이라 정사각형이 아니고, 아이콘은 늘 정사각형입니다. 늘이는 중이라 어느 크기에서든 눌린 것처럼 보입니다.{name}은 {size}이라 정사각형이 아니고, 아이콘은 늘 정사각형입니다. 여백을 넣는 중이라 그림 전체가 남고 위아래에 공간이 생깁니다.{size}밖에 안 되니 {list}이 그림보다 큽니다. 그 크기는 그리는 것이 아니라 늘리는 것이고, 그림을 늘려도 원래 없던 세부는 돌아오지 않습니다.{size}밖에 안 되니 {list}이 그림보다 큽니다. 그 크기들은 그리는 것이 아니라 늘리는 것이고, 그림을 늘려도 원래 없던 세부는 돌아오지 않습니다.{shape} {small}{name}을, 파일에 들어갈 크기마다 그린 것입니다. 위의 네모는 모두 이 화면에서의 실제 크기이고, 투명이 투명으로 보이도록 체크무늬 위에 놓았습니다. 16px짜리가 회색 얼룩처럼 보인다면 아이콘에 필요한 것은 다른 설정이 아니라 더 단순한 그림입니다.{note} {list}픽셀도 함께 쓰이지만, 그만한 네모는 화면에 들어가지 않아 여기서는 뺐습니다 — 게다가 잘못되는 쪽은 한 번도 그것이 아니었습니다.{count}을 그리는 중…{name}을 그리는 중…완료.{name}은 {slots}을 담고 있고 {size}입니다.{names}, 둘이 합쳐 {size}.{count}을 아이콘 파일 {n}개로 만들었습니다. 모두 {size}.{summary} 웹사이트 세트의 나머지는 옆의 zip에 있습니다.{slots}, {size}{name}에서, {size}.{detail} 맥 응용 프로그램 번들 안에 넣거나, 정보 가져오기로 폴더 아이콘으로 지정하세요.{detail} 여기에 아이콘 세트의 나머지 파일 {n}개가 더 있습니다.{label} · {detail} · {size}압축 없음.{kind} 내려받기복사복사했습니다선택했습니다 — Ctrl+C를 누르세요아이콘. favicon.ico는 사이트 루트에 둡니다. 브라우저는 말하지 않아도 그 주소를 요청하므로 따로 <link>가 필요하지 않습니다.당신의 사이트 이름탭. .ico보다 PNG를 선호하는 브라우저용즐겨찾기 막대와 고정된 윈도우 바로 가기iOS 홈 화면. 불투명하게 그립니다. iOS는 투명을 검정으로 바꿔 버리니까요안드로이드 홈 화면, 그리고 설치 안내웹 앱이 시작하는 동안 보여 주는 스플래시 화면같은 아이콘을, 적응형 런처가 잘라 내는 안전 영역 안에 넣은 것윈도우 시작 메뉴에 고정하는 타일웹사이트 아이콘 세트abox.tools/image-to-ico/ 의 브라우저 안에서 만들었습니다 — 만드는 데 아무것도 올리지 않았고, 이 파일들에 대한 어떤 것도 어디로도 보내지 않았습니다.이 파일과 head.html을 뺀 모든 파일을 사이트 루트에 올리세요. /favicon.ico, /apple-touch-icon.png 같은 주소에서 응답하도록 하기 위해서입니다. site.webmanifest, browserconfig.xml, head.html 안의 경로는 모두 그것을 전제로 합니다. 하위 폴더에 넣는다면 그 세 파일을 거기에 맞게 고치세요.고전적인 파비콘. {sizes}픽셀 판이 들어 있습니다안드로이드와, 홈 화면에 추가하라는 모든 안내가 읽습니다윈도우 시작 메뉴에 고정된 타일이 읽습니다<head>에 붙여 넣을 마크업. 올릴 파일이 아닙니다올리기 전에 site.webmanifest의 이름을 사이트 이름으로, 그 안의 두 색을 아이콘에 어울리는 색으로 바꾸세요.참고: .ico 출력이 꺼져 있어서 여기에는 favicon.ico가 없습니다. 사이트에는 정말로 하나 필요합니다 — 브라우저가 알아서 요청하는 주소니까요.이미지는 어디로도 가지 않았습니다. 파일 {total}개를 불러왔고 모두 이 사이트의 것입니다. {platform}무언가가 {hosts}에 접속했는데, 이 도구는 절대 그러지 않습니다. 살펴볼 만합니다. {platform}광고와 측정과 후원 버튼을 위한 이 사이트 자신의 스크립트가 호스트 {hosts}곳에서 왔습니다. 그중 어느 쪽도 이미지나 그 1바이트도 받지 않았습니다.광고와 측정과 후원 버튼을 위한 이 사이트 자신의 스크립트가 호스트 {hosts}곳에서 왔습니다. 그중 어느 쪽도 이미지나 그 1바이트도 받지 않았습니다.
원하는 결과가 나왔나요?
무엇이 잘못됐나요?
고맙습니다 — 큰 도움이 됩니다.
보내지는 것은 답변뿐이고, 그것도 버튼을 눌렀을 때만입니다. 파일도, 파일 이름도, 파일에 관한 어떤 정보도 보내지 않습니다.
# 이미지를 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`에 적혀 있습니다.
아무것도 업로드하지 않고 .ico 파일 만드는 방법
그림을 고릅니다. PNG, JPEG, WebP, SVG를 선택 영역에 끌어다 놓거나, 여러 장을 골라 한 번에 변환하세요. 정사각형이 가장 편하고, 256픽셀 이상이면 모든 크기를 만들기에 충분합니다. 브라우저가 디스크에서 곧바로 읽고, 그동안 어디로도 아무것도 나가지 않습니다.
필요한 파일을 고릅니다. 윈도우와 브라우저는 .ico를 읽고, 맥은 .icns를 읽으며 다른 쪽은 쳐다보지도 않습니다. 필요한 쪽을, 양쪽에 배포한다면 둘 다 체크하세요. 웹사이트라면 애플과 안드로이드, 타일 이미지도 필요한데 그게 세 번째 항목입니다.
아이콘의 용도를 말합니다. 웹사이트 파비콘은 16, 32, 48픽셀입니다. 윈도우 프로그램은 256도 필요하고요. 고해상도 노트북에서 제대로 보여야 하는 프로그램이라면 윈도우가 125%와 150% 배율에서 요구하는 중간 크기들도 필요합니다. 하시는 일에 맞는 것을 고르거나 크기를 직접 체크하세요. 목록의 모든 크기에는 무엇이 그 크기를 요구하는지가 적혀 있습니다. .icns에는 그런 선택이 없습니다. 애플이 정확히 열 개의 슬롯을 정해 두었고 열 개 전부가 들어갑니다.
모양과 배경을 정합니다. 아이콘은 정사각형인데 로고는 대개 아닙니다. 여백을 넣으면 그림 전체가 위아래 공간과 함께 남고, 잘라내면 가운데가 남고, 늘이면 찌그러집니다. 투명한 부분은 뒤에 놓을 색을 고르지 않는 한 투명한 채로 유지됩니다.
내려받기 전에 16픽셀짜리를 봅니다. 아이콘이 가장 자주 보이는 크기이자, 가는 선과 작은 글자가 사라지는 크기입니다. 미리보기의 모든 사각형은 만들어진 파일에서 실제 크기 그대로 그려집니다. 가장 작은 것이 뭉개져 있다면 답은 다른 설정이 아니라 더 단순한 그림입니다.
파일을 가져갑니다. 모든 크기가 들어 있는 .ico 하나가 나오고, 그렇게 요청하셨다면 이름은 favicon.ico입니다. 브라우저가 찾아가는 주소가 그것이니까요. macOS 아이콘을 체크했다면 맥 애플리케이션 번들에 바로 넣을 수 있는 .icns가 그 옆에 놓입니다. 웹사이트 세트까지 체크하면 애플과 안드로이드, 윈도우 타일 이미지와 매니페스트, 그리고 페이지에 붙여 넣을 HTML 덩어리도 함께 나옵니다. 파일이 하나를 넘으면 zip 하나로 내려옵니다.
자세한 설명
16픽셀에서도 읽히는 파비콘 만드는 방법favicon.ico에 실제로 필요한 크기, 아이폰과 안드로이드와 맥이 따로 요구하는 파일, 그리고 포스터에서 멀쩡한 로고가 16픽셀에서 사라지는 이유.
아닙니다. 그림을 디코딩하고 크기를 바꾸는 일은 내 기기에서 도는 내 브라우저가 하고, .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가 되어 하나가 다른 하나를 덮어쓸 테니까요. 체크한 모든 결과물이 모든 그림에 대해 만들어집니다. 아무 줄이나 누르면 그 그림이 미리보기에 올라옵니다.
무료인가요? 가입해야 하나요?
무료이고 계정도, 로그인도, 체험판도, 워터마크도 없습니다. 파일 개수나 용량 제한도 없습니다. 그 값을 치를 서버가 없으니까요. 작업은 내 기기에서 일어납니다. 이 사이트는 광고로 유지되는데, 그 광고에도 내 이미지에 관한 것은 넘어가지 않습니다.
오프라인에서도 되나요?
됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 로고를 어딘가로 보내서 변환하는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요.