파비콘 생성기
텍스트, 이모지, 이미지로 웹사이트용 파비콘 세트를 생성합니다.
빠른 시작 스타일
클릭하면 현재 입력한 텍스트·이모지를 유지한 채 배경·도형 스타일만 적용합니다.
생성되는 파일
- favicon.ico
- favicon-16x16.png
- favicon-32x32.png
- favicon-48x48.png
- apple-touch-icon.png
- android-chrome-192x192.png
- android-chrome-512x512.png
- site.webmanifest
<head> HTML 코드
<link rel="icon" href="/favicon.ico" sizes="any" /> <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" /> <meta name="theme-color" content="#5B8DEF" />
site.webmanifest
{
"name": "My Website",
"short_name": "My Website",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#5B8DEF",
"background_color": "#5B8DEF",
"display": "standalone"
}업로드한 이미지는 브라우저에서만 처리되며 서버로 전송되지 않습니다.
공유
사용 방법
- 1
원본 선택
짧은 텍스트, 이모지 또는 정사각형에 가까운 이미지를 선택합니다.
- 2
작은 크기 확인
색상과 여백을 조절하고 16px 미리보기를 확인합니다.
- 3
파일 저장
ICO와 PNG 세트 또는 웹사이트용 패키지를 내려받습니다.
실제 사용 예
텍스트 아이콘
한 글자 + 브랜드 배경색 + 굵은 글꼴로고 아이콘
로고 업로드 → 여백 조정 → 16px 확인처리 기준과 제한사항
가독성
16×16px에서도 구분되어야 하므로 긴 문구와 가는 선은 피하세요.
이미지 변환
원본은 정사각형 캔버스에 맞춰 여러 PNG 크기로 다시 렌더링됩니다.
캐시
교체 후 바로 보이지 않으면 브라우저 캐시와 기존 아이콘 링크를 확인하세요.
자주 묻는 질문
ICO와 PNG가 모두 필요한가요?
현대 브라우저는 PNG를 지원하지만 다양한 환경에는 ICO를 함께 제공할 수 있습니다.
글자가 흐린 이유는 무엇인가요?
글자 수를 줄이고 굵은 글꼴과 높은 대비를 사용하세요.
로고가 서버에 저장되나요?
아니요. 이미지 렌더링과 파일 생성은 브라우저에서 처리됩니다.