사용 방법
- .ico 파일을 드롭 영역에 끌어다 놓거나, 클릭해서 선택하거나, 이미지를 붙여넣습니다.
- 아이콘에 저장된 모든 크기가 출력에 남도록 ‘변환 형식’을 ‘원본 유지’로 둡니다.
- 인코딩 후 크기를 확인합니다. 여러 크기가 들어 있는 아이콘은 생각보다 클 수 있습니다.
- 파비콘 link 태그용 data URI를 복사하거나 img 태그, CSS, Markdown 출력을 복사합니다.
ICO 형식
ICO는 Windows 아이콘 형식이자 최초의 파비콘 형식입니다. 일종의 컨테이너로, 짧은 디렉터리에 하나 이상의 이미지가 각각의 너비, 높이, 색 깊이와 함께 나열됩니다. 각 이미지는 비트맵 데이터로 저장되며, 256×256 같은 큰 크기는 내장 PNG로 저장됩니다. 일반적인 favicon.ico에는 16, 32, 48픽셀 버전이 들어 있어 브라우저가 가장 선명한 것을 고를 수 있습니다.
등록된 MIME 유형은 image/vnd.microsoft.icon이지만 image/x-icon이 훨씬 널리 쓰이며, 브라우저는 둘 다 받아들입니다. Base64로 인코딩한 ICO 데이터는 파일 헤더를 인코딩한 AAABAA로 시작합니다.
data URI 파비콘
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">파비콘을 인라인으로 넣으면 내보낸 보고서, 디스크에 저장한 대시보드, 오프라인 문서 같은 단일 파일 HTML 문서나, 별도 파일을 배포하고 싶지 않은 프로토타입과 내부 도구에 편리합니다. 페이지가 많은 웹사이트라면 대개 일반 /favicon.ico가 낫습니다. 이 파일은 한 번 다운로드해 캐시되지만, data URI는 모든 HTML 응답에 반복해서 들어가기 때문입니다.
아이콘을 아예 쓰지 않으려면 <link rel="icon" href="data:,">를 넣으십시오. 브라우저가 /favicon.ico를 요청하지 않습니다.
ICO, PNG, SVG 파비콘
최신 브라우저는 <link rel="icon" type="image/png" href="data:image/png;base64,...">처럼 PNG와 SVG 파비콘도 받아들입니다. 32×32 PNG 한 장이 여러 크기를 담은 ICO보다 작은 경우가 많으며, 이런 파비콘에는 PNG Base64 변환 또는 SVG Base64 변환 도구를 사용하십시오.
이 페이지에서 ICO를 PNG, JPEG, WebP로 변환하면 브라우저가 표시하기로 선택한 이미지 하나만 남습니다. 반대로 ICO 파일을 만들려면 PNG를 인코딩한 뒤 결과를 Base64 ICO 변환 도구에 붙여넣으십시오. 16픽셀부터 256픽셀까지의 아이콘을 만들어 줍니다.
자주 묻는 질문
image/x-icon과 image/vnd.microsoft.icon 중 무엇을 씁니까?
image/vnd.microsoft.icon은 공식 등록된 유형이고, image/x-icon은 대부분의 사이트가 사용하는 유형입니다. 특정 유형을 요구하는 시스템이라면 복사한 뒤 접두사를 수정하십시오.Base64 출력에 모든 아이콘 크기가 유지됩니까?
예. 원본 형식을 유지하면 파일 전체가 인코딩되므로 브라우저가 여전히 필요한 크기를 고를 수 있습니다. 다른 형식으로 변환하면 이미지 하나만 남습니다.
data URI 파비콘은 모든 브라우저에서 작동합니까?
최신 데스크톱 브라우저는 탭에 표시합니다. 북마크, 홈 화면 바로가기, 일부 오래된 브라우저는 인라인 아이콘을 무시할 수 있으므로 공개 웹사이트에서는 파비콘 파일도 함께 제공해야 합니다.