이렇게 사용하세요
- 로고나 아이콘 이미지를 넣어요. 투명 배경 PNG나 SVG가 가장 깔끔해요.
- ICO 안에 담을 크기를 골라요. 브라우저 탭용 16·32, 윈도우 바로가기용 48, 고해상도 화면용 256을 기본으로 골라 두었어요.
- 정사각형이 아닌 이미지는 여백을 두고 맞출지, 가운데를 잘라낼지 정해요. 크기별 미리보기가 바로 바뀌어요.
- ICO 파일 받기를 누르고, 이름을 favicon.ico로 바꿔 사이트 최상위 폴더에 올린 뒤 위 코드를 head에 넣어요.
동작 원리
이미지를 크기마다 캔버스에서 따로 줄인 뒤 PNG로 저장하고, 그 PNG들을 ICO 형식의 목차(각 크기, 위치, 길이)와 함께 한 파일로 묶어요. PNG를 담은 ICO는 윈도우 비스타 이후와 모든 최신 브라우저가 읽을 수 있어요. 16px처럼 아주 작게 줄일 때는 여러 단계로 나눠 줄여서 선이 뭉개지는 것을 줄였어요. 모든 과정은 브라우저 안에서 이뤄지고 이미지는 업로드되지 않아요.
자주 묻는 질문
파비콘은 꼭 ICO여야 하나요?
최신 브라우저는 PNG나 SVG 파비콘도 읽지만, 주소 뒤에 /favicon.ico를 자동으로 찾는 브라우저와 검색 로봇이 여전히 많아요. ICO 하나를 두고 필요하면 PNG·SVG를 함께 지정하는 방식이 가장 안전해요.
작은 크기에서 로고가 잘 안 보여요.
16px에서는 가는 글자나 세밀한 무늬가 사라져요. 로고의 핵심 모양만 남긴 단순한 버전을 따로 만들어 넣으면 훨씬 또렷해요.
크기를 많이 넣으면 좋은가요?
크기를 많이 담을수록 파일이 커져요. 웹사이트 파비콘이라면 16, 32, 48, 256 정도면 충분해요.