이미지를 브라우저 탭 아이콘(favicon.ico)으로 만듭니다. 16·32·48px를 한 파일에 담아 브라우저가 자리에 맞는 크기를 골라 쓰게 합니다.

이럴 때 씁니다

파비콘은 브라우저 탭과 즐겨찾기에 뜨는 작은 아이콘입니다. 크기가 16픽셀까지 줄어들기 때문에, 큰 로고를 그대로 줄이면 대개 뭉개져서 알아볼 수 없게 됩니다. 글자가 많거나 선이 가는 로고일수록 그렇습니다.

그래서 ico라는 형식은 이미지 한 장이 아니라 여러 크기를 한 파일에 담도록 만들어져 있습니다. 여기서는 16·32·48픽셀 세 가지를 함께 넣습니다. 브라우저가 상황에 맞는 크기를 골라 쓰기 때문에, 탭에서도 즐겨찾기에서도 깨지지 않습니다.

잘 되는 그림은 단순한 그림입니다. 도형 하나, 글자 한두 개, 색 대비가 뚜렷한 것. 여백이 넉넉한 정사각형 이미지를 넣으면 결과가 좋습니다.

쓰는 법

1. 아이콘으로 쓸 이미지를 넣습니다.
2. 정사각형이 아니면 가운데를 정사각으로 잘라 씁니다.
3. favicon.ico를 받아 사이트 최상위에 올리고 <link rel="icon">으로 연결합니다.

파일은 어디로도 올라가지 않습니다

모든 처리가 브라우저 안에서 일어납니다. 이미지가 서버로 전송되지 않으므로 저희는 그 파일을 보관할 수도, 열어볼 수도 없습니다. 회사 자료나 개인 사진을 다룰 때 이 차이가 중요합니다.

자주 묻는 질문

왜 크기를 여러 개 담나요?

탭에서는 16px, 북마크나 바로가기에서는 더 큰 크기가 쓰입니다. 한 파일에 여러 크기를 담아두면 브라우저가 상황에 맞는 것을 골라 씁니다.

어떤 그림이 파비콘에 어울리나요?

16px로 줄어들면 잔 디테일은 뭉개져 얼룩으로 보입니다. 글자 한두 자나 단순한 도형이 가장 잘 버팁니다.

PNG 파비콘도 되지 않나요?

요즘 브라우저는 PNG나 SVG도 받습니다. 다만 .ico는 크기 여러 개를 한 파일에 담을 수 있고 오래된 환경에서도 안전합니다.

무료인가요?

네. 가입도, 결제도, 사용 횟수 제한도 없습니다.

파일이 서버에 올라가나요?

아니요. 브라우저 안에서만 처리됩니다. 인터넷을 끊어도 이미 열린 페이지에서는 계속 동작합니다.

몇 장까지 한 번에 되나요?

개수 제한은 두지 않았습니다. 다만 처리 속도는 사용하는 기기 성능을 따릅니다 — 서버가 아니라 이 컴퓨터가 계산하기 때문입니다.