사용법
- 글자·이모지로 만들거나 이미지로 탭에서 로고를 고릅니다.
- 배경 모양과 색을 고르고, 미리보기에서 16px 크기로도 알아볼 수 있는지 확인합니다. 브라우저 탭에는 이 크기로 나옵니다.
- ZIP으로 모두 저장한 뒤 파일을 사이트의 루트(또는 "파일을 둘 경로")에 올리고, 위 코드를 모든 페이지의
<head>에 붙입니다.
파일마다 쓰임
| 파일 | 쓰는 곳 |
|---|---|
| favicon.ico (16·32·48) | 브라우저 탭, 즐겨찾기, 오래된 브라우저·윈도 바로가기 |
| favicon-16x16.png, 32x32.png | PNG 파비콘을 읽는 최신 브라우저 |
| apple-touch-icon.png (180) | 아이폰·아이패드 "홈 화면에 추가" |
| android-chrome-192·512.png | 안드로이드 홈 화면, 설치형 웹앱(PWA) — manifest에서 지정 |
| site.webmanifest | 앱 이름·아이콘·테마 색 정보 |
ICO 파일은 어떻게 만드나요
ICO는 여러 크기의 그림을 한 파일에 담는 상자입니다. 맨 앞 6바이트에 "아이콘 파일이고 그림이 몇 장"인지 적고, 이어서 그림마다 16바이트짜리 목록(가로·세로, 색 깊이 32비트, 데이터 크기, 파일 안 위치)을 둔 뒤 실제 그림을 차례로 붙입니다. 이 도구는 그림 자리에 PNG를 그대로 넣습니다. 윈도 비스타 이후와 현재의 주요 브라우저는 PNG가 든 ICO를 읽습니다.
작은 크기는 큰 그림을 한 번에 줄이면 선이 뭉개지므로, 512px로 먼저 그린 뒤 절반씩 여러 번 줄여 16·32·48px을 만듭니다. 애플 터치 아이콘은 투명한 부분이 검게 보일 수 있어 항상 배경색을 채우고, 모서리는 iOS가 알아서 둥글게 깎으므로 사각형으로 만듭니다.
자주 묻는 질문
파비콘을 바꿨는데 브라우저에 예전 아이콘이 나와요.
브라우저가 파비콘을 오래 캐시하기 때문입니다. 새 창(시크릿 모드)으로 열어 보거나, 코드의 주소 뒤에 ?v=2처럼 버전을 붙이면 바로 바뀝니다.
SVG 파비콘도 필요하나요?
필수는 아닙니다. 이 도구가 만드는 ICO·PNG만으로 주요 브라우저와 휴대폰 홈 화면을 모두 채울 수 있습니다. 로고가 SVG로 있다면 <link rel="icon" type="image/svg+xml" href="/favicon.svg">를 한 줄 더 넣어도 됩니다.
이모지를 쓰면 기기마다 모양이 다른가요?
이모지는 지금 쓰는 기기의 글꼴로 그려서 이미지로 저장합니다. 저장된 파일은 어느 기기에서나 같은 모양으로 보이지만, 만들 때의 기기(애플·구글·윈도)에 따라 그림체가 다릅니다.
로고 이미지가 서버로 올라가나요?
아니요. 그리기, 크기 줄이기, ICO·ZIP 묶기까지 모두 이 브라우저 안에서 합니다.
