파비콘 생성기
글자·이모지나 이미지로 파비콘을 만듭니다. favicon.ico와 애플·안드로이드용 아이콘, manifest, HTML 태그까지 한 번에 받으세요.
미리보기
16·32·48·180px 실제 크기입니다. 16px에서도 알아볼 수 있는지 확인하세요.
ZIP 구성: favicon.ico(16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png(180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-tags.html
HTML <head>에 넣을 태그
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">파일들을 사이트 최상위 경로(예: https://내도메인/favicon.ico)에 올린 뒤, 위 태그를 모든 페이지의 <head>에 넣으세요.
모든 처리는 브라우저에서 이루어지며 서버로 전송되지 않습니다.
사용 안내
핵심 요약
- 글자·이모지나 이미지로 브라우저·아이폰·안드로이드용 파비콘 세트를 만듭니다.
- ZIP의 파일을 사이트 최상위에 올리고, HTML 태그를 <head>에 넣으면 적용됩니다.
- 16px에서도 알아보도록 1~2자나 단순한 기호를 쓰는 것이 좋습니다.
파비콘이란?
브라우저 탭, 북마크, 검색 결과, 휴대폰 홈 화면에 표시되는 사이트의 작은 아이콘입니다. Google 검색 결과에도 사이트 이름 옆에 표시되므로, 없으면 기본 지구본 아이콘이 나와 눈에 덜 띕니다.
만들어지는 파일
| 파일 | 크기 | 쓰이는 곳 |
|---|---|---|
| favicon.ico | 16·32·48px | 브라우저 탭, 오래된 브라우저, 검색 결과 |
| favicon-16x16.png, favicon-32x32.png | 16·32px | 최신 브라우저 탭, 북마크 |
| apple-touch-icon.png | 180px | 아이폰·아이패드 홈 화면에 추가 |
| android-chrome-192x192.png, 512x512.png | 192·512px | 안드로이드 홈 화면, 앱 설치(PWA) |
| site.webmanifest | - | 안드로이드 아이콘·이름·테마 색 정보 |
사이트에 적용하는 방법
- ZIP을 풀어 모든 파일을 사이트 최상위 폴더(도메인 바로 아래)에 올립니다.
- 함께 들어 있는
favicon-tags.html의 태그를 모든 페이지의<head>안에 붙여 넣습니다. - WordPress는 ‘외모 → 사용자 정의하기 → 사이트 아이덴티티 → 사이트 아이콘’에 512px PNG를 올리면 됩니다.
- 브라우저는 파비콘을 오래 캐시합니다. 바뀌지 않으면 강력 새로고침(Ctrl+F5)이나 시크릿 창으로 확인하세요.
잘 보이는 파비콘 만들기
- 16px에서는 글자 1~2자나 단순한 기호가 가장 잘 보입니다. 로고 전체는 뭉개지기 쉽습니다.
- 배경과 글자의 대비를 크게 하세요. 밝은 탭과 어두운 탭 양쪽에서 미리보기로 확인할 수 있습니다.
- 투명 배경을 쓰면 아이폰 홈 화면 아이콘(apple-touch-icon)은 흰 배경으로 채워집니다. iOS가 투명 부분을 검게 표시하기 때문입니다.
자주 묻는 질문
favicon.ico 하나만 있으면 안 되나요?
브라우저 탭에는 충분하지만, 아이폰·안드로이드 홈 화면에 추가할 때는 더 큰 PNG 아이콘이 필요합니다. 전체 세트를 쓰는 것을 권장합니다.
파비콘을 바꿨는데 그대로 보여요.
브라우저가 파비콘을 오래 저장해 두기 때문입니다. 강력 새로고침(Ctrl+F5)이나 시크릿 창으로 확인하세요. 검색 결과에는 반영까지 며칠 걸릴 수 있습니다.
이미지가 서버로 전송되나요?
아니요. 모든 아이콘은 브라우저 안에서 만들어지며 어디에도 업로드되지 않습니다.