이미지 한 장으로 파비콘과 앱 아이콘을 만드는 방법

2026-11-07

favicon.ico, PNG 아이콘, 웹 매니페스트, HTML 태그를 한 번에 만드는 방법과 웹사이트에 적용하는 순서를 설명합니다.

파비콘이 필요한 이유

파비콘은 브라우저 탭과 즐겨찾기에 보이는 작은 아이콘입니다. 사이트를 한눈에 알아보게 해 주고, 북마크 목록이나 검색 결과에서도 쓰입니다. 휴대폰 홈 화면에 사이트를 추가할 때는 더 큰 아이콘이 필요합니다.

zerotool 파비콘·웹 아이콘 생성기 화면. 이미지 한 장을 올리면 여러 크기의 아이콘과 HTML 태그를 만듭니다.

정사각형 이미지가 가장 좋습니다. 가로와 세로가 같고, 최소 512픽셀 이상이면 여러 크기로 줄여도 선명합니다. 작은 크기에서도 알아볼 수 있도록 글자보다는 단순한 로고나 그림을 쓰세요. SVG, PNG, JPG, WebP 파일을 올릴 수 있습니다.

favicon.ico: 오래된 브라우저와 일반적인 탭에 쓰는 아이콘입니다. 여러 크기를 한 파일에 담습니다.
favicon-16x16.png, favicon-32x32.png: 브라우저 탭용 PNG 아이콘입니다.
apple-touch-icon.png(180×180): 아이폰 홈 화면에 추가할 때 쓰는 아이콘입니다.
android-chrome-192x192.png, android-chrome-512x512.png: 안드로이드 기기와 설치형 웹 앱에 쓰는 아이콘입니다.
site.webmanifest: 웹 앱의 이름과 아이콘 정보를 담은 파일입니다.
head-tags.html: 웹페이지의 head 부분에 넣을 HTML 태그 모음입니다.

이 파일들을 ZIP 하나로 받을 수 있습니다.

1. 받은 ZIP의 파일을 웹사이트의 루트 폴더(예: 사이트 주소 바로 아래)에 올립니다.

2. head-tags.html 안의 태그를 복사해서 모든 페이지의 head 부분에 넣습니다.

3. 브라우저 탭에서 아이콘이 바뀌었는지 확인합니다. 예전 아이콘이 남아 있으면 강력 새로고침을 하세요.

4. 아이폰에서 홈 화면에 추가해 아이콘이 잘 보이는지 확인합니다.