파비콘과 ICO를 Base64로

파비콘을 Base64로 변환하는 방법

1. favicon.ico, PNG, SVG를 상자에 놓거나 파일 선택 창에서 고르세요.
2. PNG라면 최대 너비를 32(또는 48)로 설정해 512픽셀짜리 앱 아이콘을 실수로 인라인하지 않도록 하세요. ICO와 SVG 파일은 그대로 인코딩됩니다.
3. 출력 형식은 Data URI로 설정되어 있습니다. 복사해서 href에 붙여넣으세요.

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

미리보기에 아이콘과 픽셀 크기가 함께 표시되므로, 붙여넣기 전에 PNG가 정말 32×32인지 확인할 수 있습니다.

ICO, PNG, SVG 비교

favicon.ico에는 16×16, 32×32, 48×48 이미지가 함께 묶여 있는 경우가 많고, 이 모두가 Base64에 포함되므로 문자열이 예상보다 길어집니다. 브라우저 탭에는 보통 32×32 PNG 하나만 변환해도 충분합니다.

SVG 파비콘은 SVG 안의 prefers-color-scheme 미디어 쿼리로 다크 모드에 반응할 수 있습니다. 이전 Safari를 지원한다면 PNG를 대체용으로 남겨 두세요.

인라인 파비콘이 적합한 경우

• 단일 파일 HTML: 내보낸 리포트, 오프라인 문서, 파일 하나로 저장한 대시보드. 파일을 옮기면 상대 경로 favicon.ico는 아무것도 가리키지 않게 됩니다.
• 정적 파일 경로를 추가하는 것이 HTML 한 줄보다 번거로운 내부 도구와 로컬 서버.
• 동적 파비콘: 캔버스에 그린 알림 배지나 상태 색상을 link.href = canvas.toDataURL("image/png")로 적용하는 경우.

일반 웹사이트라면 별도 아이콘 파일이 더 낫습니다. 브라우저가 한 번 받아서 캐시하는 반면, 인라인 파비콘은 제공하는 모든 HTML 페이지에 반복해서 들어갑니다.

JavaScript로 파비콘 그리기

상태 표시기라면 파일이 전혀 필요 없습니다. 32×32 캔버스에 그리고 기존 아이콘 링크에 data URI를 지정하세요.

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

아이콘이 바뀌지 않을 때

• 예전 아이콘이 계속 보입니다. 브라우저는 파비콘을 페이지와 별도로 강하게 캐시합니다. 캐시 없이 새로 고치거나 시크릿 창에서 페이지를 열어 새 아이콘을 확인하세요.
• 아무것도 표시되지 않습니다. href가 올바른 형식으로 시작하는지 확인하세요: data:image/png;base64,, data:image/x-icon;base64,, data:image/svg+xml;base64,. SVG 아이콘은 루트 요소에 xmlns 속성도 있어야 합니다.
• <link rel="icon"> 태그가 여러 개입니다. 브라우저는 형식과 크기를 보고 그중 하나를 고르므로, 인라인 아이콘이 다른 선언된 아이콘에 밀릴 수 있습니다. 원하지 않는 것은 지우세요.

다시 파일로 바꾸기

data URI에서 favicon.ico를 되살리려면 Base64를 ICO로를 사용하세요. SVG 아이콘은 SVG를 Data URI로에서 URL 인코딩 버전도 만들 수 있는데, Base64보다 짧은 경우가 많습니다.

자주 묻는 질문