사용 방법
- 아이콘, 또는 아이콘으로 만들 이미지의 Base64 문자열이나 data URI를 붙여넣습니다.
- 미리 보기와 이미지 크기를 확인합니다. 정사각형 원본 이미지를 쓰면 가장 깔끔한 아이콘이 만들어집니다.
- ICO가 미리 선택되어 있습니다. 한 가지 크기(16, 32, 48, 64, 128, 256픽셀)나 다중 크기 아이콘을 선택합니다.
- .ico 파일을 다운로드합니다. 입력이 이미 ICO이고 안에 든 모든 이미지를 그대로 유지하려면 ‘원본’을 선택하십시오.
Base64 속 ICO 파일
ICO 파일은 작은 컨테이너로, 헤더와 항목 디렉터리, 그리고 항목마다 하나씩 BMP 또는 PNG 데이터로 저장된 이미지로 이루어집니다. 헤더가 00 00 01 00 바이트로 시작하므로 아이콘의 Base64는 AAABAA로 시작합니다. Base64 아이콘은 <link rel="icon" href="data:image/x-icon;base64,..."> 같은 파비콘 data URI, 단일 파일 HTML 페이지, 웹사이트 아이콘을 반환하는 API에서 볼 수 있습니다.
등록된 MIME 유형은 image/vnd.microsoft.icon이지만 image/x-icon이 훨씬 널리 쓰이며 어디서나 작동합니다.
아이콘 크기 고르기
| 크기 | 주요 용도 |
|---|---|
| 16 × 16 | 일반 화면의 브라우저 탭과 북마크 |
| 32 × 32 | 고밀도 화면의 브라우저 탭 |
| 48 × 48 | Windows 바탕 화면과 파일 탐색기 아이콘 |
| 64, 128 | 큰 미리 보기와 애플리케이션 목록 |
| 256 × 256 | Windows의 큰 아이콘 및 아주 큰 아이콘 보기 |
다중 크기 옵션은 16, 32, 48, 256을 한 파일에 담으므로 각 시스템이 가장 알맞은 크기를 고를 수 있습니다. 내부 이미지는 PNG로 압축되어 투명도가 유지되며, Windows Vista 이상과 모든 최신 브라우저에서 지원됩니다.
아이콘을 파비콘으로 사용하기
브라우저는 사이트 루트의 /favicon.ico를 자동으로 요청하므로, 파일을 그 위치에 저장하기만 하면 마크업이 없어도 작동합니다. href에 Base64 data URI를 넣으면 이 요청을 줄일 수 있지만, 아이콘이 따로 캐시되지 않고 페이지마다 다시 다운로드됩니다. 최신 브라우저는 PNG와 SVG 아이콘도 지원하며, 두 가지를 함께 쓰는 구성이 일반적입니다.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">단순한 도형과 강한 대비를 가진 정사각형 이미지에서 시작하십시오. 세밀한 디테일은 16픽셀에서 사라집니다. 다른 용도로 쓸 PNG 버전이 필요하다면 Base64 PNG 변환을 사용해 보십시오.
자주 묻는 질문
favicon.ico는 어떤 크기여야 합니까?
16, 32, 48픽셀 이미지를 담은 다중 크기 아이콘이면 브라우저와 Windows를 모두 지원합니다. 이 도구의 다중 크기 옵션은 큰 아이콘 보기용으로 256도 추가합니다.
Base64 PNG나 SVG를 ICO로 변환할 수 있습니까?
예. 붙여넣은 다음 ‘다운로드 형식’을 ICO로 두고 크기를 선택하십시오. 브라우저가 표시할 수 있는 이미지라면 무엇이든 변환할 수 있습니다.
미리 보기에 아이콘이 한 가지 크기만 표시되는 이유는 무엇입니까?
ICO 파일에는 여러 이미지가 들어갈 수 있지만 미리 보기는 그중 하나만 보여 줍니다. 파일 안의 모든 이미지를 유지하려면 ‘원본’으로 다운로드하십시오.
ICO는 투명도를 유지합니까?
예. 아이콘은 완전한 알파 채널을 가진 PNG 데이터로 저장되므로 둥근 모서리와 부드러운 가장자리가 투명하게 유지됩니다.