파비콘, 무엇을 몇 px로 만들어야 하나

파비콘이 뭐길래 종류가 이렇게 많나

파비콘은 브라우저 탭, 즐겨찾기 목록, 검색 결과, 휴대폰 홈 화면에 나타나는 사이트의 작은 아이콘입니다. 사이트의 얼굴인 셈이라 없으면 어딘가 미완성처럼 보입니다.

문제는 표시되는 자리마다 요구하는 크기와 형식이 다르다는 점입니다. 그래서 파비콘은 파일 하나가 아니라 여러 크기를 묶은 한 벌로 준비합니다.

필요한 파일 한 벌

• •favicon.ico — 16·32·48px을 한 파일에 담은 것. 주소창·탭·즐겨찾기용, 가장 오래된 표준이라 지금도 필수입니다
• •PNG 16px·32px — 최신 브라우저가 탭에 쓰는 고화질 버전
• •apple-touch-icon 180px — 아이폰·아이패드에서 홈 화면에 추가할 때 쓰입니다
• •PNG 192px·512px — 안드로이드 홈 화면과 PWA 설치용. site.webmanifest 파일에 등록합니다

원본은 어떻게 준비하나

정사각형의 큰 이미지(512px 이상)에서 줄여 나가는 것이 정석입니다. 작은 이미지를 키우면 흐려집니다.

16px에서도 알아볼 수 있어야 하므로 형태는 단순할수록 좋습니다. 글자가 많은 로고보다는 심벌 하나가 낫고, 가장자리에 여백을 조금 두면 작게 줄어도 답답해 보이지 않습니다. 배경을 투명하게 두면 밝은 테마·어두운 테마 어디서든 자연스럽습니다.

HTML에는 이렇게 넣습니다

만든 파일들을 사이트 최상위 폴더에 올리고, HTML의 head 안에 link 태그로 알려주면 됩니다. rel="icon"으로 ICO와 PNG를, rel="apple-touch-icon"으로 180px 아이콘을, rel="manifest"로 site.webmanifest를 연결합니다.

참고로 favicon.ico를 사이트 루트에 두면 태그 없이도 대부분의 브라우저가 알아서 찾아갑니다. 다만 크기별 PNG와 홈 화면 아이콘까지 제대로 쓰려면 태그를 넣는 편이 확실합니다.

직접 만들지 말고 한 번에

크기별로 이미지를 일일이 줄이고 ICO로 묶는 일은 손이 많이 갑니다. 이미지 컨버터 NOW의 파비콘 생성기에 이미지 한 장을 올리면 favicon.ico와 크기별 PNG, site.webmanifest, 붙여넣을 HTML 태그까지 ZIP 하나로 만들어 드립니다.

변환은 브라우저 안에서 처리되어 로고 파일이 서버로 전송되지 않습니다.