파비콘(favicon.ico) 만드는 법: 꼭 필요한 크기와 형식

favicon.ico 파일 하나에 여러 크기의 이미지를 담을 수 있고, 브라우저는 상황에 맞는 걸 고릅니다. 탭에는 16×16, 고해상도 화면과 작업표시줄에는 32×32, 윈도우 바로가기에는 48×48을 씁니다. 이 세 가지를 ICO 하나에 담으면 거의 모든 경우가 해결됩니다.

휴대폰은 별도 파일을 씁니다. iOS는 180×180 PNG(apple-touch-icon)를, 안드로이드와 설치형 웹앱은 웹 매니페스트에 적힌 192×192, 512×512 PNG를 찾습니다.

ICO가 호환성이 가장 좋고, 브라우저가 /favicon.ico를 자동으로 찾습니다. PNG 파비콘은 링크를 명시하면 최신 브라우저 모두에서 됩니다. SVG 파비콘은 어떤 크기에서도 깨지지 않고 최신 크롬·엣지·파이어폭스가 지원하지만 모든 브라우저는 아니라서, ICO를 대비용으로 함께 두는 게 좋습니다.

정사각형 이미지에서 시작하세요. 단순하게 가야 합니다. 글자 하나나 굵은 도형은 줄여도 살아남지만, 작은 글씨가 들어간 복잡한 로고는 뭉개집니다. 대비를 강하게 하고, 밝은 탭과 어두운 탭 양쪽에서 어떻게 보이는지 확인하세요.

로고가 SVG라면 PNG 말고 SVG에서 바로 변환하세요. 벡터는 크기마다 새로 그려지기 때문에 16픽셀 버전도 선명합니다.

Localvert의 PNG→ICO 또는 SVG→ICO로 변환하면 16·32·48픽셀이 담긴 favicon.ico 하나가 나옵니다. 정사각형이 아닌 이미지는 잘라내지 않고 여백을 넣고, 투명 배경도 유지합니다.

favicon.ico를 사이트 최상위 폴더에 두고 <head> 안에 <link rel="icon" href="/favicon.ico" sizes="any"> 한 줄을 넣으세요. 브라우저가 파비콘을 오래 캐시하기 때문에 바뀐 게 안 보이면 시크릿 창으로 확인해 보세요.