⭐ 파비콘(ICO) 만들기
이미지 한 장으로 브라우저 탭에 뜨는 favicon.ico를 만듭니다. 3가지 크기가 한 파일에 담깁니다.
사용 방법
- 로고나 아이콘 이미지를 올립니다. 정사각형이 가장 좋고, 아니면 중앙이 자동으로 잘립니다.
- 16·32·48px 미리보기를 확인합니다.
- favicon.ico를 다운로드하고, 함께 제공되는 <link> 태그를 사이트 head에 넣습니다.
이럴 때 유용해요
- 새로 만든 홈페이지·블로그의 브라우저 탭 아이콘을 설정할 때
- 워드프레스·카페24·아임웹 등에 올릴 favicon.ico 파일이 필요할 때
- PNG 로고만 있는데 개발자가 ico 형식을 요구할 때
알아두면 좋은 팁
- 16px에서도 알아볼 수 있게 단순한 도형·이니셜 로고가 좋습니다. 글자가 많은 로고는 뭉개져 보입니다.
- 파일은 보통 사이트 루트(/favicon.ico)에 올리면 태그 없이도 브라우저가 자동 인식합니다.
- 파비콘을 바꿨는데 그대로 보이면 브라우저 캐시 때문입니다. 강력 새로고침(Ctrl+F5)을 해보세요.
자주 묻는 질문
왜 하나의 ico 안에 여러 크기가 들어가나요?
브라우저 탭은 16px, 즐겨찾기와 작업표시줄은 32px, 바탕화면 바로가기는 48px처럼 쓰이는 곳마다 필요한 크기가 다릅니다. 멀티사이즈 ico는 상황에 맞는 크기를 브라우저가 골라 쓰게 해 어디서나 선명합니다.
PNG를 이름만 favicon.ico로 바꿔도 되나요?
권장하지 않습니다. 최신 브라우저는 열어주기도 하지만 일부 환경에서 아이콘이 깨지거나 무시됩니다. 이 도구는 ICO 컨테이너 규격에 맞게 바이너리를 조립하므로 호환성 문제가 없습니다.
직사각형 이미지를 올리면 어떻게 되나요?
긴 쪽이 잘리고 중앙의 정사각형 영역만 사용됩니다. 로고가 한쪽에 치우쳐 있다면 미리 정사각형으로 잘라서 올리는 것이 좋습니다.
애플 터치 아이콘(아이폰 홈 화면)도 이걸로 되나요?
아이폰 홈 화면용은 ico가 아니라 180×180 PNG(apple-touch-icon)를 별도로 넣는 것이 표준입니다. 크기 지정 리사이즈 도구로 180px PNG를 함께 만들어 두면 좋습니다.
