🔒 파일이 기기 밖으로 나가지 않습니다
파비콘 생성기
이미지나 글자/이모지로 웹사이트에 필요한 최신 파비콘 세트를 한 번에 만들고, HTML 태그를 복사한 뒤 ZIP 하나로 받으세요.
원본
파일을 여기에 끌어다 놓거나, 붙여넣기(Ctrl+V) 또는
이미지를 추가하세요 (512px 이상 정사각형이 가장 좋습니다).
맞춤
여백0%
모양
웹 앱 매니페스트
이름
짧은 이름
테마 색
배경 색
<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">
<meta name="theme-color" content="#2f6fdf">site.webmanifest
{
"name": "My Website",
"short_name": "Website",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#2f6fdf",
"background_color": "#ffffff",
"display": "standalone"
}사용 방법
- 이미지(로고, PNG/SVG)를 고르거나 “글자 / 이모지”로 바꿉니다.
- 여백, 배경, 모양을 조절합니다 — 브라우저 탭과 휴대폰 홈 화면 미리보기가 바로 보입니다.
- 웹 앱 매니페스트에 들어갈 사이트 이름과 색을 정합니다.
- ZIP을 받아 사이트 루트에 올리고 HTML 코드를 <head>에 붙여넣습니다.
자주 묻는 질문
2026년에 꼭 필요한 파비콘 파일은?
레거시·윈도우용 favicon.ico(16/32/48), 32×32 PNG(선택: 16×16), 180×180 apple-touch-icon.png, site.webmanifest에서 참조하는 192/512px 아이콘입니다. 이 생성기가 정확히 이 세트를 만듭니다.
파일은 어디에 올리나요?
/favicon.ico 주소가 열리도록 웹사이트 루트(index.html 옆)에 두세요. 다른 곳에 두면 HTML 코드와 site.webmanifest의 경로를 바꾸면 됩니다.
애플 터치 아이콘이 투명하지 않은 이유는?
iOS는 투명한 부분을 검은색으로 채웁니다. 그래서 180px 아이콘은 배경색으로 채워 홈 화면에서 자연스럽게 보이게 합니다.
파비콘이 바뀌지 않아요.
브라우저가 파비콘을 강하게 캐시합니다. 강력 새로고침하거나 아이콘 주소를 직접 열거나 /favicon.ico?v=2처럼 버전을 붙이세요. 문제 해결 가이드를 참고하세요.