favicon이란?
favicon은 브라우저 탭, 즐겨찾기와 북마크에 표시되는 작은 아이콘입니다. 아주 작지만, 사이트가 즐겨찾기에 등록된 후 얼마나 알아보기 쉬운지를 결정합니다.
탭 아이콘 외에도, iOS에서 홈 화면에 추가하거나 Android에 앱으로 설치할 때 더 큰 크기의 아이콘이 사용됩니다.
여러 크기를 생성해야 하는 이유는?
상황마다 필요한 크기가 다릅니다: 탭에는 16/32, 홈 화면 아이콘에는 180/192, 앱 스토어나 스플래시 화면에는 512가 필요할 수 있습니다.
큰 이미지 한 장만 제공하면 브라우저가 축소할 때 작은 아이콘이 흐려지기 쉽습니다. 이 도구는 자주 쓰는 모든 규격을 한 번에 생성합니다.
- favicon.ico: 호환성이 가장 좋으며 16/32/48 세 가지 크기를 포함
- favicon-16x16.png / favicon-32x32.png: 최신 브라우저 탭
- apple-touch-icon.png（180）: iOS 홈 화면 추가
- android-chrome-192x192.png / 512x512.png: Android와 PWA
원본은 어느 정도 크기가 좋나요?
정사각형, 512×512 이상의 PNG를 사용하는 것을 권장합니다. 정사각형이면 생성 시 잘리거나 여백이 한쪽으로 쏠리는 것을 피할 수 있습니다.
정사각형이 아니라면 "전체 표시"(그래픽 전체를 유지하고 주위에 여백) 또는 "꽉 채워 자르기"(캔버스를 가득 채우고 남는 부분을 잘라냄)를 선택할 수 있습니다.
투명 배경과 apple-touch-icon
투명 배경은 탭에서 보통 더 깔끔합니다. 하지만 iOS의 홈 화면 아이콘은 투명을 지원하지 않아, 투명 영역이 검게 변합니다.
따라서 이 도구는 apple-touch-icon을 생성할 때 자동으로 불투명한 바탕색(기본값 흰색)을 사용하며, 나머지 크기는 사용자가 선택한 투명 설정을 그대로 유지합니다.
배포는 어떻게 하나요?
다운로드한 파일을 웹사이트 루트 디렉터리(index.html과 같은 위치)에 넣고, 생성된 HTML 코드를
안에 붙여 넣으면 됩니다.브라우저는 선언된 아이콘을 우선 사용하며, favicon.ico는 구형 브라우저를 위한 예비용으로 동작합니다.