사용 방법
- 글자로 만들려면 한두 글자와 색을, 이미지로 만들려면 로고 파일을 넣습니다.
- 모서리 둥글기와 안쪽 여백을 조절합니다. 오른쪽 브라우저 탭 미리보기에서 16px 크기로 어떻게 보이는지 꼭 확인하세요.
- 전체 세트 ZIP 받기를 눌러 파일들을 사이트의 최상위 폴더(public 등)에 넣고, 아래 HTML 코드를 <head>에 붙입니다.
계산 기준과 공식
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
| favicon.ico | 16·32·48 | 브라우저 탭, 즐겨찾기, 오래된 브라우저와 검색 결과 |
| favicon-16x16.png · 32x32 | 16 · 32 | 최신 브라우저 탭 |
| apple-touch-icon.png | 180 | 아이폰·아이패드 홈 화면에 추가 |
| android-chrome-192 · 512 | 192 · 512 | 안드로이드 홈 화면, 웹앱 설치(manifest) |
먼저 512px 원본을 그린 뒤, 절반씩 여러 번 줄여서 작은 크기를 만듭니다. 한 번에 512px에서 16px로 줄이는 것보다 선이 덜 뭉개집니다. favicon.ico는 16·32·48px PNG 세 장을 하나의 ICO 파일에 담는 방식으로 만들며, 윈도우와 모든 최신 브라우저가 읽습니다.
예시
블로그 이름 첫 글자로 아이콘 만들기
글자에 ‘김’, 배경을 블로그 대표색으로 두고 둥글기 22%, 굵게를 고르면 앱 아이콘 같은 정사각형이 됩니다. 한 글자는 16px에서도 알아볼 수 있지만 세 글자는 탭에서 뭉개지니 피하세요.
가로로 긴 회사 로고로 만들기
가로 로고를 그대로 넣으면 작게 찌그러져 보입니다. 로고의 심볼 부분만 이미지 자르기 도구에서 정사각형으로 잘라 넣고, ‘꽉 채우기’를 고르는 것이 좋습니다.
결과를 읽는 법
미리보기의 16px 아이콘이 실제 브라우저 탭에서 보이는 크기입니다. 여기서 알아보기 어렵다면 글자 수를 줄이거나 여백을 줄여 그림을 키우세요. 체크 무늬가 보이는 부분은 투명 영역입니다.
자주 묻는 질문
파일은 어디에 넣어야 하나요?
사이트 주소 바로 아래(예: example.com/favicon.ico)에서 열리도록 최상위 폴더에 넣습니다. 워드프레스나 블로그 서비스는 관리자 화면의 사이트 아이콘 설정에 512px PNG를 올리면 됩니다.
아이콘을 바꿨는데 탭에는 예전 아이콘이 나와요.
브라우저가 파비콘을 오래 저장해 두기 때문입니다. 강력 새로고침(Ctrl+Shift+R)을 하거나, HTML의 주소 뒤에 ?v=2처럼 버전을 붙이면 바로 바뀝니다.
SVG 파비콘도 만들어 주나요?
지금은 PNG와 ICO만 만듭니다. 이 둘이면 모든 브라우저와 기기를 지원합니다.
검색 결과에 파비콘이 안 보여요.
구글은 48px의 배수 크기 아이콘을 권장하며, 크롤링 후 반영까지 며칠에서 몇 주가 걸립니다. 세트에 포함된 48px ICO와 192px PNG면 기준을 충족합니다.
결과가 이상하거나 있었으면 하는 기능이 있나요? 오류 제보 · 의견 보내기