기능 소개
파비콘 생성기는 글자, 이모지, 로고를 최신 웹사이트에 필요한 모든 아이콘으로 바꿔 줍니다. 크기별로 아이콘을 렌더링하고, favicon.ico를 묶고, 웹 앱 매니페스트를 작성하고, 페이지의 <head>에 붙여넣을 <link> 태그까지 제공합니다. 모든 파일은 ZIP 하나로 다운로드할 수 있습니다.
텍스트로 시작하면 가장 빠르게 깔끔한 아이콘을 얻을 수 있습니다. 글자 1~3개나 이모지를 입력하고 색상, 글꼴, 모양(정사각형, 둥근 모서리, 원)을 고르세요. 텍스트 아이콘에는 확대·축소 가능한 favicon.svg도 포함되어 어떤 크기나 고밀도 화면에서도 선명하게 보입니다.
사용 방법
- 소스로 텍스트 또는 이미지를 선택합니다. 이미지라면 **이미지 선택…**을 누르고 정사각형 PNG, SVG, JPG를 고릅니다.
- 모양을 정하고, 아이콘을 색깔 있는 타일 위에 놓으려면 배경 채우기를 켜고, 투명하게 두려면 끕니다.
- 사이트 이름을 입력합니다. 누군가 사이트를 휴대폰 홈 화면에 추가할 때 아이콘 아래에 표시되는 이름으로,
site.webmanifest(Android)와apple-mobile-web-app-title태그(iOS)에 기록됩니다. 이어서 파일을 업로드할 아이콘 폴더(보통/)를 입력합니다. - 미리보기를 확인합니다. 16px 아이콘이 브라우저 탭에 실제로 보이는 모습입니다.
- ZIP 다운로드를 누르고 파일을 사이트에 업로드한 뒤 HTML을
<head>에 붙여넣습니다.
예시
기본 설정으로 생성되는 태그는 다음과 같습니다.
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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">
<meta name="apple-mobile-web-app-title" content="My Site">팁
- 브라우저는 파비콘을 강하게 캐시합니다. 아이콘을 교체한 뒤에는 시크릿 창에서 페이지를 열어 변경 사항을 확인하세요.
- iOS는 Apple touch icon의 투명 영역을 무시하고 검은색으로 채우므로, 홈 화면 아이콘을 깔끔하게 보이려면 배경을 채워 두세요.
자주 묻는 질문
› 어떤 파일을 받게 되나요?
favicon.ico(16, 32, 48px), 16, 32, 48px PNG 아이콘, 180px Apple touch icon, 192px와 512px Android 아이콘, site.webmanifest, HTML 태그, 그리고 텍스트로 시작한 경우 favicon.svg를 받습니다.
› 로고가 어딘가에 업로드되나요?
아니요. 이미지는 브라우저에서 canvas로 읽고 크기를 조정하며, ZIP 파일도 기기에서 만들어집니다.
› 어떤 이미지가 가장 좋나요?
배경이 투명한 512 × 512px 이상의 정사각형 PNG나 SVG가 좋습니다. 단순하고 굵은 모양은 16px에서도 잘 보이지만, 세밀한 디테일과 가는 글자는 알아보기 어렵습니다.
› 아직도 favicon.ico가 필요한가요?
네. 오래된 브라우저와 /favicon.ico를 직접 요청하는 도구를 위해 필요합니다. 최신 브라우저는 HTML의 PNG나 SVG 링크를 사용합니다.