abox.tools

한국어

16픽셀에서도 읽히는 파비콘 만드는 방법

파비콘은 로고를 작게 줄인 그림 한 장이 아닙니다. 정해진 크기의 그림 여러 장을, 대부분이 한 번도 열어 보지 않는 컨테이너에 담은 것이고, 그중 가장 작은 것이 실제로 모두가 보는 그림입니다. 어떤 크기가 필요한지, 그 옆에 어떤 파일이 놓이는지, 그리고 로고가 그 여정을 견디지 못할 때 무엇을 해야 하는지 정리했습니다.

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

마지막 업데이트 2026년 8월 26일

Markdown으로 보기

짧은 답

이미지를 ICO로를 열고 최소 256픽셀짜리 정사각형 그림을 넣은 다음, 프리셋을 웹사이트 파비콘 그대로 두고 favicon.ico를 내려받으세요. 사이트의 루트에 두어 https://yoursite.com/favicon.ico에서 응답하게 하세요. 그 주소는 HTML에 적혀 있든 아니든 모든 브라우저가 요청하므로, 엄밀히 말해 그 밖에 꼭 해야 할 일은 없습니다.

아래는 기술적으로 존재하는 아이콘과 실제로 읽히는 아이콘을 가르는 부분입니다. 어떤 크기가 들어가는지, 아이폰과 안드로이드는 대신 무엇을 요구하는지, 그리고 로고가 가로 16픽셀을 견디지 못할 때 무엇을 할지.

그림 하나가 아니라 크기의 묶음인 이유

.ico 파일은 컨테이너입니다. 그 안에는 같은 것을 여러 크기로 그린 완전한 그림이 여럿 들어 있고, 그것을 읽는 쪽이 필요한 크기에 가장 가까운 것을 고릅니다.

중복처럼 들리지만 아닙니다. 아이콘을 16픽셀로 그리는 브라우저에는 선택지가 둘 있습니다. 직접 그려 둔 16픽셀 판본을 읽거나, 더 큰 것을 그 자리에서 줄이거나. 두 번째가 더 나쁘고, 눈에 띄게 그렇습니다. 복잡한 로고를 자동으로 줄이면 죽이 되지만, 사람이 들여다보며 만든 16픽셀 판본은 단순화해 볼 기회가 있었던 것이니까요. 이 형식이 여러 크기를 담는 이유가 바로 그 기회를 드리는 것입니다.

웹사이트에는 세 크기가 관례이고, 각각 이유가 있습니다.

그보다 큰 것은 .ico 안이 아니라 그 옆의 PNG로 있어야 하는데, 이유는 아래 모바일 파일 절에 나옵니다.

미리 정해 둔 묶음들의 목록과 각각에 담기는 크기들. 웹사이트 아이콘이라면 16과 32와 48픽셀, 그 아래에 파일에 들어갈 것들의 요약.
.ico는 그릇이고, 이것은 그 안에 들어가는 것들의 목록입니다. 미리 정해 둔 묶음은 브라우저가 실제로 요청하는 조합으로 가는 지름길입니다.

16픽셀 문제

아무도 미리 말해 주지 않는 대목입니다. 16픽셀은 보통 화면에서 4밀리미터쯤 됩니다. 전부 합쳐 256개의 점이니, 이 문장의 글자 수보다 적습니다. 간판이나 명함, 웹사이트 헤더에서 통하도록 만들어진 것 중 그 크기로 줄어들고도 살아남는 것은 거의 없습니다.

사라지는 순서는 이렇습니다.

해법은 설정이 아니라 다른 그림입니다. 도형 한두 개로 단순화하고, 대비를 높이고, 글자는 한 자를 넘지 않는 마크. 그 판본을 32나 48픽셀에서 일부러 그리고, 그것을 원본으로 쓰세요.

도구가 할 수 있는 일은 공개하기 전에 그 문제를 보여 주는 것입니다. 이미지를 ICO로의 미리보기는 모든 크기를 화면에서 실제 크기로 그립니다. 이걸 판단할 방법은 그것뿐이거든요. 16픽셀 아이콘을 64로 키워 보여 주면 멀쩡해 보이기만 하고 아무것도 알려 주지 않습니다.

같은 마크를 16, 32, 48, 64, 128픽셀로 그린 미리보기 띠.
16픽셀짜리가 여러분이 만든 것 옆에 놓입니다. 마크를 단순하게 만들어야 했는지를 정하는 것은 이 한 장입니다.

로고가 정사각형이 아닙니다. 여백일까요, 잘라내기일까요?

아이콘은 언제나 정사각형이고 대부분의 로고는 아니어서, 무언가는 일어나야 합니다. 답은 셋이고 똑같이 좋지 않습니다.

여백 넣기는 그림 전체를 남기고 위아래에 공간을 둡니다. 안전한 기본값이고 가로로 긴 워드마크에는 틀린 선택입니다. 높이의 세 배로 넓은 것을 정사각형에 넣으면 높이의 3분의 1을 차지하는데, 16픽셀에서는 로고 5픽셀에 빈 공간 11픽셀입니다.

가운데 잘라내기는 한가운데에서 가장 큰 정사각형을 떼어 냅니다. 심벌 옆에 회사 이름이 붙은 로고 묶음이라면 이 방식이 둘 다를 가로질러 자르는 일이 흔합니다. 원본을 먼저 심벌만 남게 직접 잘라 내고, 그것을 변환하는 편이 낫습니다.

늘이기는 그림을 눌러 맞춥니다. 이것이 옳은 상황은 거의 없고, 주로 도구가 그것을 말없이 하고 있지는 않다는 뜻으로 제시됩니다.

가로로 긴 로고에 대한 일반적인 답은 이렇습니다. 로고를 변환하지 마세요. 혼자서도 통하는 그 일부를 변환하세요.

투명일까요, 단색 배경일까요?

웹사이트라면 대개 투명이 맞습니다. 브라우저 탭은 브라우저와 테마에 따라 회색이거나 흰색이거나 거의 검정이고, 투명한 아이콘은 그 전부 위에 앉습니다. 흰 배경을 칠해 넣은 아이콘은 어두운 탭 바에서 흰 사각형입니다.

알아 둘 만한 예외가 둘 있습니다.

웹사이트에 필요한, .ico가 아닌 파일들

favicon.ico는 브라우저와 윈도우를 감당합니다. 휴대폰은 감당하지 못하고, 직접 만든 아이콘 묶음이 대개 너무 일찍 멈추는 자리가 여기입니다. 다른 세 플랫폼이 각자의 이름으로 각자의 파일을 요구하고, 그중 어느 것도 .ico 안을 들여다보지 않습니다.

틀리기 쉬운 것이 하나 더 있습니다. 안드로이드 런처는 적응형 아이콘을 휴대폰이 좋아하는 모양대로 잘라 냅니다. 원, 스퀘어클, 둥근 사각형 같은 것들이죠. 그리고 살아남는 것이 보장되는 부분은 이미지 가운데 80%뿐입니다. 가장자리까지 꽉 차게 그린 아이콘은 모서리를 잃습니다. 마스커블 아이콘이란 그것입니다. 같은 그림을 정사각형 안쪽에 일부러 작게 그리고, 매니페스트에 따로 선언해 두는 것이죠.

이미지를 ICO로에서 웹사이트 세트를 체크하면 이 전부와 매니페스트, 그리고 그것들을 가리키는 HTML 덩어리가 나옵니다. 그 덩어리가 일부러 빼 두는 것이 하나 있는데, favicon.ico를 가리키는 <link>입니다. 브라우저가 그 주소를 알아서 요청하므로, 이름까지 적어 두면 같은 파일을 두 번 가져오게 됩니다.

윈도우 프로그램 아이콘은 다른 묶음입니다

아이콘이 사이트가 아니라 프로그램을 위한 것이라면 크기가 달라집니다. Visual Studio가 기본으로 주는 app.ico에 들어 있는 것은 16, 32, 48, 256입니다. 셸에서 쓰는 세 크기에, 시작 메뉴와 탐색기의 아주 큰 보기가 가져다 쓰는 큰 것 하나를 더한 구성이지요.

고해상도 화면에서는 윈도우가 20, 24, 40, 64, 96도 요구하고, 없으면 가장 가까운 크기에서 다시 샘플링합니다. 그게 문제가 되는지는 아이콘에 달렸습니다. 평평한 도형은 재샘플링을 견디고 복잡한 것은 못 견딥니다. 그것들을 넣으면 파일이 대략 두 배가 되는데, 프로그램에는 아무것도 아닙니다. 방문자 모두가 파일을 가져가는 파비콘과는 계산이 완전히 다르니까요.

크기에 대해 하나 더. 바이트가 몰려 있는 곳은 256 항목입니다. 압축 없이 저장하면 그것 하나가 264 KB이고, 아이콘 안에 PNG로 저장하면 대개 30 아래입니다. PNG 항목은 윈도우 비스타부터 읽을 수 있으니, 피할 이유는 정말로 그보다 오래된 소프트웨어이거나 아이콘을 직접 해석하는 설치 프로그램이나 임베디드 도구뿐입니다.

맥은 아예 다른 파일을 읽습니다

아이콘이 윈도우가 아니라 맥 애플리케이션을 위한 것이라면 위의 어느 것도 해당하지 않습니다. macOS는 .ico를 아예 읽지 않습니다. .icns를 읽습니다. 여러 크기를 한 컨테이너에 담는다는 같은 발상을 다른 껍데기에 넣은 것인데, 알아 둘 만한 차이가 셋 있습니다.

쓰는 법. 애플리케이션 번들은 그것을 YourApp.app/Contents/Resources/에 두고 Info.plist에 이름을 적습니다. 폴더나 디스크 이미지라면 Finder에서 .icns를 고르고 Command-C를 누른 다음, 바꾸려는 것에서 정보 가져오기를 열고 왼쪽 위의 작은 아이콘을 클릭한 뒤 Command-V를 누르세요.

이미지를 ICO로에서 macOS 아이콘을 체크하면 하나를 써 주는데, 윈도우 파일을 옆에 두든 두지 않든 됩니다. 양쪽 플랫폼에 배포하는 것이라면 둘 다 필요하고, 둘 다 같은 그림에서 한 번에 그려집니다.

제대로 됐는지 확인하기

브라우저는 파비콘을 거의 무엇보다 세게 캐시합니다. 그래서 “올렸는데 아무것도 안 바뀌었다”는 대개 실수가 아니라 캐시입니다. 파일을 다시 고치기 전에 해 볼 두 가지.

윈도우에서는 .ico를 폴더에 넣고 탐색기의 보기 크기를 바꿔 가며 확인할 수 있습니다. 작은, 보통, 큰, 아주 큰 아이콘이 같은 파일에서 서로 다른 항목을 그리므로, 시스템이 보여 줄 그대로 각각을 보실 수 있습니다.

맥에서는 .icns가 미리보기에서 열리고, 옆에 모든 슬롯이 나열됩니다. Finder에서도 같은 방법이 통하고요. 폴더에 넣고 보기 옵션의 크기 슬라이더를 끌면 안에 든 그림들 사이를 오가는 것이 보입니다.

이 중 무엇에도 업로드는 필요 없습니다

그림 크기를 조절하는 것은 브라우저가 오래전부터 해 온 일이고, .ico는 6바이트 헤더와 이미지당 16바이트, 그다음 이미지들입니다. 하나를 만드는 어느 단계에도 서버가 필요하지 않고, 여기 도구는 서버를 쓰지 않습니다. 페이지의 Content-Security-Policy가 연결 가능한 주소를 전부 적어 두는데, 그중 이 사이트의 것은 없습니다.

여기서는 평소보다 더 신경 쓸 만합니다. 무료 파비콘 생성기에 건네지는 로고는 꽤 자주 아직 공개되지 않은 브랜드입니다. 아이콘은 가장 먼저 만들어지고 가장 나중에 발표되는 것 중 하나니까요. 말로 듣기보다 직접 확인하고 싶다면, 페이지를 불러온 다음 인터넷을 끊고 그냥 하나 만들어 보세요. 온라인 변환 사이트에 파일을 올려도 안전할까요?에 어떤 도구에든 해 볼 수 있는 확인 세 가지가 더 있습니다.