파비콘 만들기

파비콘 생성기 사용 방법

1. 1

   소스 선택

   25 MB 이하의 로고나 사진을 업로드하거나, 11가지 글꼴 중 하나로 한 글자에서 세 글자까지 입력하거나, 이모지를 선택하세요.

2. 2

   아이콘 디자인

   모양 없음, 사각형부터 쿠키, 클로버까지 12가지 모양 옵션 중 하나를 고르고, 배경색 또는 투명, 여백, 모서리 둥글기를 조절하세요.

3. 3

   모든 크기 확인

   16~192픽셀 미리보기, 밝은 탭과 어두운 브라우저 탭, Android 마스커블 안전 영역 안에서 아이콘을 확인하세요.

4. 4

   다운로드 및 설치

   favicon.zip을 저장해 사이트 폴더에 압축을 풀고, 생성된 HTML을 페이지 head에 붙여 넣으세요.

파비콘 생성기 소개

파비콘 생성기는 하나의 디자인으로 최신 웹사이트에 필요한 아이콘 세트를 모두 만들어요. ZIP에는 16, 32, 48픽셀 이미지가 들어 있는 favicon.ico, 16, 32, 48픽셀 PNG 각각, 배경이 불투명한 180픽셀 apple-touch-icon(iOS가 둥근 모서리를 직접 적용해요), 192픽셀과 512픽셀 Android Chrome 아이콘, 내용이 80% 안전 영역 안에 머무는 512픽셀 마스커블 아이콘, 앱 이름과 짧은 이름, 테마 색상이 담긴 site.webmanifest, 그리고 link 태그와 theme-color 태그가 들어 있어 바로 붙여 넣을 수 있는 HTML 코드가 들어 있어요. 모든 PNG는 무손실로 최적화돼요.

업로드한 이미지는 Lanczos 필터로 축소하기 때문에 큰 로고도 16픽셀에서 또렷하게 유지되고, SVG 로고는 먼저 1,024픽셀로 그려요. 텍스트 아이콘은 선택한 글꼴로, 이모지는 Noto Color Emoji 글꼴로 렌더링해서 어떤 방문자의 시스템에서도 똑같이 보여요. 아이콘을 사이트 루트에 두지 않는다면 /icons/ 같은 폴더를 입력하세요. HTML 코드와 매니페스트의 경로도 함께 바뀌어요.

새 웹사이트나 블로그, 홈 화면에 설치하는 웹 앱, 브라우저 탭 사이에서 눈에 띄어야 하는 내부 대시보드, 사이드 프로젝트용 임시 아이콘 등에 쓸 수 있어요. 16픽셀에서는 세밀한 디테일과 긴 단어가 사라지므로 단순한 모양과 한두 글자가 가장 잘 어울려요. 이 도구는 파일을 호스팅하거나 사이트를 수정하지 않으니 직접 업로드하세요.

기능

파비콘 생성기: 자주 묻는 질문