사용 방법
- 소스에서 '텍스트 / 이모지'를 선택해 한 글자에서 세 글자까지 입력하거나, '이미지'를 선택해 로고를 업로드하세요(SVG나 512px 이상의 정사각형 PNG가 가장 좋아요).
- 색상과 모양(사각형, 둥근 사각형, 원형)을 고르세요.
- 16, 32, 64, 128px 미리보기를 확인하세요. 작은 크기에서도 디자인을 알아볼 수 있는지 알 수 있어요.
- ZIP을 다운로드하고, 파일을 사이트 루트 폴더에 업로드한 뒤 HTML을 head에 붙여넣으세요.
옵션 설명
- favicon.ico
- 브라우저, 북마크, Windows 바로 가기용 16, 32, 48px 버전이 들어 있어요.
- apple-touch-icon.png
- 단색 배경의 180 × 180px 아이콘으로, 누군가 iPhone이나 iPad 홈 화면에 사이트를 추가할 때 쓰여요.
- icon-192.png / icon-512.png
- Android 홈 화면과 설치형 웹 앱을 위해 site.webmanifest에서 참조해요.
- icon.svg
- 최신 브라우저용 확장 가능한 아이콘이에요. 원본이 텍스트이거나 SVG 파일일 때 포함돼요.
HTML 코드
파일을 사이트 루트에 업로드한 뒤 모든 페이지의 head에 다음 코드를 추가하세요.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">자주 묻는 질문
실제로 필요한 파일은 무엇인가요?
사이트 루트의 favicon.ico 하나로 모든 브라우저를 지원해요. iOS용으로 apple-touch-icon.png를 추가하고, Android에서 사이트를 설치하거나 고정할 때 제대로 된 아이콘을 원하면 192/512 아이콘과 매니페스트도 추가하세요.
16px에서 파비콘이 흐릿하게 보이는 이유는 뭔가요?
16 × 16픽셀에서는 세밀한 부분이 사라져요. 텍스트가 들어간 전체 로고 대신 굵은 글자나 단순화한 로고 마크를 쓰세요.
파비콘을 바꿨는데 예전 것이 계속 보여요.
브라우저는 파비콘을 강하게 캐시해요. 페이지를 강력 새로고침하거나, link 태그에 /favicon.ico?v=2처럼 버전 쿼리를 붙이세요.
이모지를 파비콘으로 쓸 수 있나요?
네. 이모지는 시스템의 이모지 글꼴로 그려지므로 결과물이 미리보기에서 보이는 것과 같아요.
개인정보 보호
이 도구는 전적으로 브라우저에서 실행돼요. 파일과 텍스트는 기기에서 처리되며 서버로 업로드되지 않아요.