브라우저 탭과 즐겨찾기에 뜨는 작은 아이콘이 파비콘입니다. 제대로 넣으려면 favicon.ico 하나로 끝나지 않고, 모바일 홈 화면용, PWA 매니페스트용 등 여러 크기가 필요합니다. 이 도구는 이미지 한 장으로 그 묶음을 한 번에 만듭니다.
왜 여러 크기가 필요한가
favicon.ico에는 16·32·48px를 함께 담아 브라우저가 상황에 맞는 크기를 고르게 합니다. 여기에 아이폰 홈 화면용 apple-touch-icon(180px), 안드로이드·PWA용 192·512px PNG, 그리고 이들을 묶는 site.webmanifest가 더해집니다.
- favicon.ico — 16·32·48px 포함 (브라우저 탭·즐겨찾기)
- apple-touch-icon.png(180) — 아이폰 홈 화면
- android-chrome 192·512px — 안드로이드·PWA
- site.webmanifest — 아이콘 묶음 정의
만들고 적용하기
정사각형에 가까운 이미지(로고 등)를 올리면 중앙을 정사각형으로 잘라 각 크기를 만듭니다. '파비콘 생성'을 누르면 위 파일들이 ZIP으로 다운로드됩니다. 압축을 풀어 사이트 루트 폴더에 그대로 올리세요.
마지막으로 함께 제공되는 HTML 코드를 페이지의 <head>에 붙여넣으면 끝입니다. 티스토리·워드프레스 등에서도 같은 파일과 코드를 쓰면 됩니다. 아이콘 리사이즈와 ICO 인코딩은 전부 브라우저가 처리하니, 아직 공개하지 않은 로고를 어딘가에 올릴 걱정도 없습니다.