작동 방식
이미지나 글자를 브라우저와 휴대폰이 요구하는 크기마다 캔버스에 그려 PNG로 저장하고, 16·32·48px은 favicon.ico 하나로 묶어요. 모든 작업은 브라우저 안에서 하고 아무것도 업로드하지 않아요.
favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest
파일별 용도
- favicon.ico: 브라우저 탭에 뜨는 기본 아이콘이에요. 모든 브라우저와 Windows가 사이트 루트에서 이 파일을 찾아요.
- apple-touch-icon.png: 아이폰·아이패드에서 홈 화면에 추가할 때 쓰는 아이콘이에요. 배경은 항상 채워져요.
- icon-192.png, icon-512.png: 안드로이드와 설치형 웹앱(PWA)이 매니페스트에서 가져다 써요.
- site.webmanifest: 사이트 이름, 색, 아이콘 목록을 담은 작은 JSON 파일이에요.
활용 팁
- 모든 파일을 index.html이 있는 사이트 루트 폴더에 올리고, 코드는 모든 페이지의 head 안에 붙여 넣으세요.
- 16px에서는 단순하고 굵은 모양이 잘 보여요. 작은 글씨나 가는 선은 사라져요.
- 브라우저는 파비콘을 오래 캐시해요. 바뀐 게 안 보이면 아이콘 주소를 직접 열거나 시크릿 창으로 확인하세요.
- theme-color 태그는 안드로이드 브라우저 주소창을 배경색으로 물들여요.
계산 기준과 출처
- HTML 표준 — link rel="icon" · WHATWG
- 웹 앱 매니페스트(Web Application Manifest) · W3C
- 웹 애플리케이션 설정(apple-touch-icon) · Apple Developer
최종 검토 2026년 10월 15일
자주 묻는 질문
파비콘은 어떤 크기가 필요한가요?
16·32·48px이 든 favicon.ico, 180px apple-touch-icon, 안드로이드용 192·512px 아이콘이면 요즘 브라우저와 휴대폰을 모두 챙길 수 있어요.
로고가 서버에 올라가나요?
아니요. 아이콘은 브라우저 안에서 그리고 묶어요.
SVG도 되나요?
네. SVG·PNG·JPG·WebP·GIF를 받아요. 512px 이상 정사각형 이미지면 가장 선명해요.
애플 아이콘은 왜 투명하지 않나요?
iOS는 투명한 부분을 검은색으로 채우기 때문에 180px 아이콘은 항상 배경색을 깔아요.
새 파비콘이 안 보여요.
브라우저가 파비콘을 오래 캐시해요. 아이콘 주소를 직접 열거나 캐시를 지우거나 시크릿 창으로 확인하세요.