파비콘(favicon)은 웹사이트를 열었을 때 브라우저 탭과 즐겨찾기에 표시되는 작은 아이콘입니다. 사이트의 첫인상과 신뢰도를 좌우하는 요소라, 직접 만든 로고나 이미지를 파비콘으로 넣어두면 좋습니다. 이 글에서는 이미지를 파비콘용 .ico로 만들고 웹사이트에 적용하는 방법을 알려드립니다.
파비콘 권장 크기
파비콘은 작게 표시되므로 너무 복잡한 이미지보다 단순하고 또렷한 형태가 좋습니다. ICO 파일에는 여러 해상도를 함께 담을 수 있으니, 다음 크기를 포함하길 권장합니다.
- 16px — 브라우저 탭 기본 크기 (필수)
- 32px — 고해상도 화면, 즐겨찾기 (권장)
- 48px·256px — 일부 환경과 바로가기에서 사용
이미지로 파비콘 만들기
- ICO 변환기에 로고/이미지(PNG·JPG 등)를 올립니다.
- 크기에서 16 · 32(가능하면 48·256도)를 체크합니다.
- 생성된
.ico를 내려받아 파일명을favicon.ico로 바꿉니다.
정사각형이 아니면 “전체 보이기”로 비율을 유지하거나, 미리 정사각형으로 잘라 두면 깔끔합니다.
웹사이트에 적용하기
favicon.ico를 사이트 최상위 폴더에 올리고, HTML <head> 안에 아래 한 줄을 넣습니다.
<link rel="icon" href="/favicon.ico" sizes="any">
대부분의 브라우저는 최상위에 favicon.ico가 있으면 <link> 없이도 자동으로 인식합니다.
파비콘이 안 보일 때
적용했는데 안 보이면 브라우저 캐시 때문인 경우가 많습니다. Ctrl+F5로 강력 새로 고침을 하거나, 시크릿 창에서 확인해 보세요. 파일 경로(/favicon.ico)가 정확한지도 다시 확인합니다.
자주 묻는 질문
PNG 파비콘도 되는데 왜 ICO인가요?
최신 브라우저는 PNG 파비콘도 지원하지만, ICO는 한 파일에 여러 크기를 담아 호환성이 가장 넓습니다. 특히 구형 환경까지 고려하면 ICO가 안전합니다.
꼭 favicon.ico라는 이름이어야 하나요?
자동 인식을 원하면 그 이름이 편합니다. 다른 이름을 쓰려면 <link rel="icon" href="...">로 경로를 지정하면 됩니다.