파비콘 만들기 — 이미지·글자로 favicon.ico와 PNG 한 번에
이미지나 글자로 favicon.ico, 여러 크기 PNG, manifest와 HTML 코드를 만드는 브라우저 도구
브라우저에서 처리 · 서버로 전송되지 않음
한두 글자가 가장 잘 보여요. 최대 4글자까지 넣을 수 있어요.
site.webmanifest의 name에 들어가요.
파비콘 만들기란?
파비콘은 브라우저 탭, 북마크, 홈 화면에 나타나는 사이트의 작은 아이콘이에요. 이 도구는 로고 이미지나 글자, 이모지 하나로 필요한 크기를 한꺼번에 만들어 주고, 사이트에 붙일 HTML 코드와 웹 앱 매니페스트까지 같이 줘요. 이미지는 브라우저 안에서만 처리돼요.
사용법
- 만드는 방법을 골라요. 글자·이모지로는 글자와 글꼴, 배경색을 정하고 이미지로는 로고 파일을 올려요.
- 이미지는 정사각형으로 맞추는 방법(가운데 잘라 채우기 또는 여백 두기)과 배경 투명 여부를 정해요. 모양은 사각, 둥근 사각, 원 중에서 골라요.
- 필요하면 사이트 이름, 짧은 이름, 테마 색을 적어요. site.webmanifest와 HTML 코드에 반영돼요.
- 크기별 미리보기를 확인하고 하나씩 받기 하거나 **전체 받기 (ZIP)**으로 받아요.
- 파일을 사이트 루트에 올리고 나온 HTML 코드를 head에 붙여요.
만들어지는 파일과 기준
| 파일 | 크기 | 용도 |
|---|---|---|
| favicon.ico | 16·32·48 | 브라우저 기본, 오래된 환경 |
| favicon-16x16.png, favicon-32x32.png | 16, 32 | 브라우저 탭 |
| favicon-48x48.png | 48 | 바탕화면 바로가기 |
| apple-touch-icon.png | 180 | iOS 홈 화면 (모서리까지 채운 불투명 사각형) |
| android-chrome-192x192.png, android-chrome-512x512.png | 192, 512 | 안드로이드, PWA |
| android-chrome-maskable-512x512.png (선택) | 512 | 안드로이드 적응형 아이콘: 그림을 가운데 안전 영역에 넣고 배경을 끝까지 채움 |
- 원본 만들기: 512px 정사각형 이미지를 먼저 만들고 거기서 모든 크기를 줄여요. 작은 크기는 절반씩 줄여 가며 마지막 단계에서 맞추기 때문에 가장자리가 덜 뭉개져요.
- ICO 구조: 6바이트 머리말, 항목당 16바이트의 표, 그다음 PNG 데이터 순서예요.
- 글자 크기: 글자 폭이 칸의 약 78%를 넘지 않고 글꼴 크기가 칸의 72%를 넘지 않게 자동으로 맞춰요.
- 글자색: 배경색을 바꾸면 읽기 좋은 검정이나 흰색으로 따라가요. 직접 바꿀 수도 있어요.
파비콘을 정할 때 팁
탭에서는 16픽셀 정도로 보이기 때문에 복잡한 로고보다 단순한 모양과 진한 대비가 잘 보여요. 로고에 글자가 들어 있다면 이니셜 한두 글자로 줄여서 만들어 보세요.
코드 예시
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">자주 묻는 질문
이미지가 서버에 올라가나요?
아니요. 크기를 줄이고 ICO 파일로 묶는 과정이 전부 브라우저 안에서 이루어져요. 결과 파일은 내 기기로만 내려받아요.
어떤 크기의 파일이 만들어지나요?
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png(180), android-chrome-192x192.png, android-chrome-512x512.png와 16·32·48을 담은 favicon.ico가 만들어져요. 여기에 site.webmanifest와 HTML에 붙일 link 코드가 함께 나와요. ZIP으로 한 번에 받을 수 있어요.
favicon.ico에는 무엇이 들어 있나요?
16, 32, 48픽셀 이미지를 PNG 형식 그대로 담은 ICO 파일이에요. 이 구조는 최신 브라우저와 Windows 비스타 이후에서 모두 읽혀요. 파일을 만들 때 ICO 헤더와 항목 표를 직접 써 넣고, 테스트에서 매직 바이트(00 00 01 00)와 항목 수를 검사해요.
사각형이 아닌 이미지는 어떻게 되나요?
파비콘은 정사각형이라서 기본은 가운데를 기준으로 가장 큰 정사각형을 잘라 써요. 잘리면 곤란한 로고라면 「전체를 넣고 여백 두기」를 골라 비율을 지키고 남는 곳을 투명하게 두세요.
글자나 이모지로 만들 때 주의할 점이 있나요?
16픽셀은 아주 작아서 한두 글자만 큰 글씨로 넣어야 알아볼 수 있어요. 이모지는 기기마다 그림이 달라서 내 화면에서 보이는 모양으로 그려져요. 한글 글꼴은 내 기기에 설치된 글꼴을 쓰기 때문에 기기마다 모양이 조금 달라질 수 있어요.
파일은 어디에 올리나요?
사이트의 맨 위 경로(루트)에 올리고 HTML의 head 안에 나온 link 코드를 붙이면 돼요. 다른 폴더에 올린다면 코드 안의 경로를 바꿔야 해요. 브라우저는 파비콘을 오래 저장해 두기 때문에 바꾼 뒤 바로 보이지 않으면 캐시를 지우고 확인하세요.
