사용 방법
만드는 방법을 두 가지 중에서 고르세요.
- 이미지로 만들기: 로고 이미지를 끌어 놓거나, 눌러서 고르거나, 복사한 이미지를 Ctrl+V(Mac은 ⌘+V)로 붙여 넣으세요. PNG, JPG, WebP, SVG를 10MB까지 넣을 수 있습니다. 정사각형이 아닌 이미지는 “가운데 맞춤 (여백)“으로 전체를 넣거나 “가운데 잘라내기”로 가운데 부분만 쓸 수 있고, 여백과 투명 부분은 투명으로 두거나 원하는 색으로 채울 수 있습니다.
- 글자·이모지로 만들기: 1 ~ 2글자를 넣고 배경색, 글자색, 모양(사각형·둥근 사각형·원)을 고르세요. 글꼴은 기기에 설치된 시스템 글꼴을 쓰므로, 이모지는 기기마다 모양이 조금 다를 수 있습니다.
결과에는 16·32·48·180px 아이콘이 실제 크기로 나오고, 16·32·48px 아이콘은 확대한 모습도 함께 나옵니다. 밝은 테마와 어두운 테마의 브라우저 탭에서 어떻게 보이는지도 볼 수 있습니다. 파일은 하나씩 받거나 “전부 받기(ZIP)“로 한 번에 받을 수 있습니다.
원본 이미지는 512px 이상을 권장합니다. 더 작으면 원본보다 큰 아이콘은 늘어나 흐려질 수 있어 경고를 보여 줍니다. 경고에서 어느 변을 보는지는 “정사각형으로 맞추기” 설정에 따라 달라서, “가운데 맞춤 (여백)“에서는 긴 변, “가운데 잘라내기”에서는 짧은 변이 기준입니다. 예를 들어 800 × 400px 이미지는 “가운데 맞춤 (여백)“이면 경고가 없지만 “가운데 잘라내기”로 바꾸면 400px이 기준이 되어 경고가 나옵니다. 이때 늘어나는 것은 512px 아이콘 하나뿐이고 나머지 다섯 크기는 400px에서 줄여 만듭니다. SVG는 크기마다 새로 그리므로 경고가 나오지 않습니다. 다만 외부 글꼴이나 이미지를 불러오는 SVG는 ICO·PNG 파일에서 그 부분이 빠질 수 있으니 “미리보기”에서 확인하세요. 큰 이미지는 절반씩 단계적으로 줄여 작은 크기에서도 거칠어지지 않게 합니다.
SVG는 img 요소로 그려 변환하므로 SVG 안의 스크립트는 실행되지 않습니다.
이미지와 글자 모드의 모양 옵션: “모양”(사각형·둥근 사각형·원)은 “글자·이모지로 만들기”에만 있습니다. “이미지로 만들기”는 이미지를 정사각형에 맞추기만 하고 모서리를 깎지 않습니다. 둥근 아이콘이 필요하면 둥근 모양 바깥의 네 모서리를 투명하게 만든 이미지를 올리고 “여백·투명 부분 배경”을 “투명”으로 두세요. 이미지의 투명한 부분은 favicon.ico, icon-192.png, icon-512.png에 그대로 남습니다.
만들어지는 파일과 크기
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
favicon.ico |
16·32·48px | 브라우저 탭 |
favicon.svg |
원본 그대로 | 브라우저 탭 (SVG를 올렸을 때만) |
apple-touch-icon.png |
180×180px | iPhone·iPad 홈 화면 |
icon-192.png, icon-512.png |
192·512px | 웹 앱 매니페스트 (Android 홈 화면 등) |
site.webmanifest |
— | 웹 앱 매니페스트 파일 |
Microsoft의 ICO 형식 문서는 흔히 쓰는 아이콘 크기로 16·32·48px을 들고 있어, favicon.ico에 이 세 크기를 담습니다. 이 세 크기의 아이콘은 PNG로 따로 나오지 않고 favicon.ico 안에만 들어 있습니다. Apple 문서는 iPhone 레티나 화면용 apple-touch-icon 크기로 180×180px을 예로 들고, <link>가 없으면 사이트 루트에서 apple-touch-icon.png 같은 이름의 파일을 찾는다고 설명합니다. web.dev에 따르면 Chromium 계열 브라우저에는 웹 앱 매니페스트에 최소 192×192px과 512×512px 아이콘이 있어야 하고, 매니페스트 파일 확장자는 사양이 권하는 .webmanifest를 씁니다.
apple-touch-icon은 홈 화면에 놓이는 아이콘이라 투명 부분 없이 배경을 채워 만듭니다. 이미지로 만들 때 “여백·투명 부분 배경”을 “투명”으로 골랐다면 흰색으로 채웁니다. 글자·이모지로 만들 때는 고른 모양과 상관없이 사각형 전체를 배경색으로 채웁니다.
ICO 파일 안에 PNG를 담는 방식
ICO 파일은 여러 크기의 이미지를 한 파일에 담는 형식입니다. 맨 앞 6바이트 헤더(ICONDIR)에 예약값 0, 형식 1(아이콘), 이미지 개수를 적고, 그 뒤에 이미지마다 16바이트 항목(ICONDIRENTRY)으로 가로·세로 크기, 데이터 길이, 데이터가 시작하는 위치를 적습니다. 그래서 ICO 파일은 늘 00 00 01 00 바이트로 시작합니다.
원래 ICO에는 비트맵 데이터를 넣었지만, Windows Vista부터는 이미지 자리에 PNG 파일을 그대로 넣는 방식도 쓸 수 있습니다. 이 경우 데이터는 PNG 서명으로 시작하는 32비트 ARGB PNG 이미지이고, 투명도는 PNG의 알파 채널에서 가져옵니다. 이 도구는 16·32·48px PNG를 이 방식으로 담아 favicon.ico를 만듭니다. 별도 라이브러리 없이 브라우저 안에서 파일 구조를 직접 씁니다.
“전부 받기”의 ZIP 파일도 브라우저 안에서 만듭니다. PNG와 ICO는 이미 압축된 파일이라 다시 압축하지 않고, PKWARE ZIP 사양의 무압축(store) 방식과 CRC-32 검사값으로 묶습니다.
HTML에 넣는 방법
- 받은 파일을 사이트의 맨 위 폴더(루트)에 올리세요.
- 결과의 “HTML
<head>에 넣을 코드”를 복사해 모든 페이지의<head>안에 붙여 넣으세요.
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">SVG를 올렸다면 <link rel="icon" href="/favicon.svg" type="image/svg+xml">가 favicon.ico 다음 줄에 더해집니다. MDN에 따르면 브라우저는 rel="icon" 링크가 여럿이면 type·sizes·media를 보고 알맞은 것을 고르고, 똑같이 알맞으면 마지막 것을 씁니다. SVG를 지원하지 않는 브라우저는 favicon.ico를 씁니다. 다만 favicon.svg는 올린 파일 그대로입니다. “가운데 잘라내기”나 “색 채우기”로 고른 설정은 ICO와 PNG 파일에만 적용되고 favicon.svg에는 들어가지 않습니다. 모든 아이콘을 같은 모습으로 맞추려면 HTML 코드에서 favicon.svg 줄을 지우고 그 파일은 올리지 마세요.
이 코드에서 rel="icon"으로 연결되는 파일은 favicon.ico와, SVG를 올렸을 때의 favicon.svg뿐입니다. 그래서 글자·이모지나 PNG·JPG·WebP 이미지로 만든 경우 HTML 코드에서 favicon.ico 줄을 지우면 rel="icon" 줄이 하나도 남지 않습니다. apple-touch-icon.png는 rel="apple-touch-icon"으로만, icon-192.png와 icon-512.png는 site.webmanifest로만 연결됩니다.
HTML 표준에는 페이지에 rel="icon" 링크가 없으면 브라우저가 /favicon.ico를 대신 요청할 수 있다고 적혀 있습니다. 링크를 넣더라도 favicon.ico는 루트에 두는 편이 안전합니다. 이미 웹 앱 매니페스트가 있다면 새 파일 대신 결과의 icons 부분만 기존 매니페스트에 옮기세요.