파비콘 생성기
🖼️ 이미지이미지를 웹사이트 브라우저 탭용 파비콘(ICO)으로 만들어 줍니다. 다중 크기 지원.
이미지 업로드
정사각형 이미지 권장 (512x512 이상)
최대 10MB
⭐ 파비콘 생성기란?
웹사이트 파비콘을 다양한 크기로 한 번에 생성하는 도구. 원본 이미지 한 장만 올리면 브라우저 탭, 북마크, iOS/Android 홈 아이콘, PWA 스플래시까지 각 플랫폼이 요구하는 모든 크기를 자동 생성하고, HTML 코드까지 함께 제공합니다.
📋 파비콘 사이즈별 용도
| 크기 | 용도 | 필수 여부 |
|---|---|---|
| 16x16 | 브라우저 탭 (기본) | 필수 |
| 32x32 | 브라우저 탭 (고해상도) | 필수 |
| 180x180 | Apple Touch Icon (iOS) | 권장 |
| 192x192 | Android Chrome | 권장 |
| 512x512 | PWA 스플래시 화면 | PWA 필수 |
🧩 HTML에 넣는 방법
생성된 파일을 사이트 루트에 올린 뒤, <head> 안에 아래 태그를 넣으면 됩니다. 브라우저는 상황에 맞는 크기를 알아서 골라 씁니다.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
PWA로 설치되게 하려면 site.webmanifest에 192×192, 512×512 아이콘을 등록해야 합니다.
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}🔁 파비콘이 안 바뀔 때
파비콘은 브라우저가 유독 오래 캐시하는 리소스입니다. 파일을 교체했는데 예전 아이콘이 계속 보인다면 대부분 코드 문제가 아니라 캐시 문제입니다. 아래 순서대로 확인해 보세요.
- 강력 새로고침 —
Ctrl+Shift+R(맥은Cmd+Shift+R)로 캐시를 무시하고 다시 받습니다. - 파비콘 URL 직접 열기 — 주소창에
/favicon.ico를 직접 입력해 새 파일이 올라갔는지 확인합니다. - 쿼리스트링 붙이기 —
favicon.png?v=2처럼 버전을 붙이면 새 파일로 인식됩니다. - 시크릿 창에서 확인 — 캐시가 없는 상태라 실제 배포 결과를 정확히 볼 수 있습니다.
- CDN 캐시 무효화 — CDN을 쓴다면 배포 후에도 엣지에 옛 파일이 남아 있을 수 있습니다.
💡 좋은 파비콘 만들기 팁
- 정사각형 원본 —
512x512이상 권장 - 심플한 디자인 — 작은 크기에서도 식별 가능하게
- 투명 배경 — PNG 형식으로 활용 가능
- 브랜드 색상 — 로고 핵심 색상으로 인지도 강화
- 테스트 —
16x16에서도 식별되는지 확인
💡 디자인 팁
글자 대신 심볼이 좋습니다. 16x16에서 글자는 거의 안 보이지만, 단순한 도형/이니셜 한 글자는 또렷이 보입니다.
자주 묻는 질문
원본 이미지는 어떤 크기가 좋나요?▼
512x512 픽셀 이상의 정사각형 이미지를 권장합니다. 큰 이미지에서 작은 크기로 축소해야 품질이 좋습니다.
생성된 파비콘은 어디에 넣어야 하나요?▼
보통 웹사이트 루트 디렉토리에 저장하고, 제공되는 HTML 코드를 <head> 태그 안에 추가하면 됩니다.
ICO 파일도 필요한가요?▼
과거에는 .ico 형식이 필수였지만, 현대 브라우저는 PNG 파비콘을 잘 지원합니다. 구형 IE 호환이 필요하면 별도 ICO 변환 도구를 사용하세요.
파비콘을 바꿨는데 예전 아이콘이 계속 보여요.▼
브라우저가 파비콘을 오래 캐시하기 때문입니다. 강력 새로고침(Ctrl+Shift+R)을 하거나 favicon.png?v=2처럼 쿼리스트링을 붙여 새 파일로 인식시키세요. 시크릿 창에서 확인하면 실제 배포 상태를 볼 수 있습니다.
다크 모드에서 아이콘이 안 보이는데 어떻게 하나요?▼
검은 배경에 어두운 로고를 쓰면 묻힙니다. 투명 배경 대신 브랜드 색 배경을 깔거나, 밝은 테두리를 넣어 두 테마 모두에서 식별되도록 만드는 것이 안전합니다.
업로드한 이미지가 서버로 전송되나요?▼
아니요. 크기 변환은 브라우저 Canvas에서만 처리되며 이미지가 서버로 올라가지 않습니다. 미공개 로고도 안심하고 사용할 수 있습니다.