ICO와 favicon이란
아무 웹사이트나 열면, 브라우저 탭에 있는 작은 아이콘이 바로 favicon입니다. 보통 .ico 파일이며, PNG도 사용됩니다. favicon은 웹사이트의 "얼굴"이며, 사용자는 수많은 탭 중에서 이것으로 빠르게 웹사이트를 식별합니다.
ICO 포맷이 필요한 이유
현대 브라우저는 PNG를 favicon으로 지원하지만, ICO 포맷은 여전히 대체 불가능한 장점이 있습니다:
- 최고의 호환성: 구형 브라우저, Windows 데스크톱 바로가기는 ICO만 인식
- 다중 크기 패키징: 하나의 ICO 파일에 16x16, 32x32, 48x48 등 다양한 크기를 포함할 수 있으며, 시스템이 자동으로 선택
- 북마크, PWA 아이콘: 일부 시나리오에서는 여전히 ICO 필요
DocsAll 이미지를 ICO로 변환 도구
이미지를 ICO로 변환 도구로 빠르게 생성:
- 정사각형 소스 이미지 준비 (256x256 이상 PNG 권장)
- ICO 변환 도구를 열고 소스 이미지 업로드
- 도구가 자동으로 다중 크기 ICO 생성
- .ico 파일 다운로드
favicon 설정 방법
기본 설정
favicon.ico를 웹사이트 루트 디렉토리에 넣으면 브라우저가 자동으로 인식합니다. HTML의 head에서 link 태그로 명시적으로 선언할 수도 있으며, rel 속성을 icon으로, href를 favicon.ico로 설정합니다.
다기기 적응
현대 웹사이트는 다양한 크기를 동시에 설정할 것을 권장합니다:
- favicon.ico: 기본, 루트 디렉토리에 배치
- apple-touch-icon.png (180x180): iOS 홈 화면 추가용
- icon.png (192x192, 512x512): PWA용
소스 이미지 디자인 권장 사항
- PNG 사용: 투명 배경 지원, ICO는 PNG에서 변환 시 효과가 더 좋습니다
- 정사각형: 16x16, 32x32는 표시 크기이며, 소스 이미지는 크게 하면 스케일링에 유리
- 간결하게: 작은 크기에서는 복잡한 패턴이 뭉개지므로, 단순한 도형과 브랜드 색상 사용
- 투명 배경: 흰 바탕 사각형을 피하고 브라우저 탭에 자연스럽게 녹아들게
자주 묻는 질문
favicon이 업데이트되지 않아요
브라우저 캐시가 매우 강력해 favicon을 바꿔도 표시되지 않으면, 강제 새로고침(Ctrl+F5)하거나 경로에 버전 매개변수를 추가하세요 (예: favicon.ico?v=2).
아이콘이 흐릿하게 표시돼요
소스 이미지가 너무 작거나 정사각형이 아닌 상태에서 늘어났기 때문입니다. 256x256 이상의 정사각형 PNG로 다시 생성하세요.
선명한 favicon은 웹사이트를 더 전문적으로 보이게 합니다. ICO 도구로 몇 분이면 해결되니, 탭을 비워두지 마세요.