이니셜 및 이모지 파비콘 생성기
이미지를 따로 준비하지 않아도 단순하고 알아보기 쉬운 파비콘을 만들 수 있습니다. 이니셜 한두 글자를 입력하거나 이모지 하나를 선택한 뒤 모양과 배경색을 조정하세요. 글자 디자인에서는 문자 색상과 글꼴 스타일도 선택할 수 있지만, 이모지는 브라우저 고유의 모습을 유지합니다. 512 px 미리보기는 브라우저에서 바로 갱신되며, 완성된 다운로드에는 웹사이트에 디자인을 적용하는 데 필요한 작은 브라우저 아이콘, 모바일 아이콘, 설정 파일이 들어 있습니다. 어떤 내용도 업로드되지 않으며 AI도 사용하지 않습니다.
파비콘 만드는 방법
-
1
아이콘 내용 선택
간결한 레터마크를 만들려면 이니셜 한두 글자를 입력하고, 이모지를 쓰려면 하나를 선택하세요.
-
2
디자인 꾸미기
정사각형, 둥근 정사각형, 원 중에서 모양과 배경을 고르세요. 글자에는 문자 색상과 글꼴도 적용할 수 있지만, 이모지는 고유의 모습을 유지합니다.
-
3
미리보기 확인
512 px 미리보기를 확인하면서 16 px 브라우저 탭 아이콘으로 줄여도 디자인이 선명한지 생각해 보세요.
-
4
다운로드 및 설치
브라우저에서 만든 파비콘 묶음을 다운로드하고 파일을 사이트에 추가한 뒤, 포함된 head 코드를 붙여넣거나 환경에 맞게 수정하세요.
파비콘 묶음에 포함되는 파일
하나의 파비콘 디자인은 작은 브라우저 탭부터 모바일 홈 화면까지 여러 곳에서 잘 보여야 합니다. 생성기는 같은 디자인을 아래의 실용적인 크기로 렌더링하고 브라우저 안에서 파일을 묶습니다.
| 파일 | 크기 또는 내용 | 주요 용도 |
|---|---|---|
favicon.ico |
16, 32, 48 px 프레임 | 브라우저 탭, 북마크, ICO 파일을 요청하는 소프트웨어 |
favicon-16x16.png |
16 × 16 px | 작은 브라우저 파비콘 |
favicon-32x32.png |
32 × 32 px | 표준 브라우저 파비콘 |
apple-touch-icon.png |
180 × 180 px | Apple 터치 아이콘 |
android-chrome-192x192.png |
192 × 192 px | 작은 Android 웹 앱 아이콘 |
android-chrome-512x512.png |
512 × 512 px | 큰 웹 앱 아이콘 |
mstile-150x150.png |
150 × 150 px | Microsoft 타일 이미지 |
site.webmanifest |
JSON 매니페스트 | 웹 앱 매니페스트를 사용하는 브라우저에 Android 아이콘 파일 지정 |
browserconfig.xml |
XML 설정 | Microsoft 타일 이미지와 색상 지정 |
favicon-head.html |
HTML 코드 | 아이콘, 매니페스트, 브라우저 설정 참조를 복사해 쓸 수 있는 코드 |
16 px에서도 잘 보이는 파비콘 만들기
파비콘은 포스터를 작게 줄인 그림이 아닙니다. 세밀한 장식, 긴 문구, 미묘한 색상 차이는 브라우저 탭 크기에서 금방 사라집니다. 굵은 이니셜 한 글자, 짧은 두 글자 표식, 단순한 이모지 하나가 복잡한 구성보다 알아보기 쉬운 경우가 많습니다.
- 전경색과 배경색의 대비를 뚜렷하게 만드세요.
- 플랫폼 마스크 때문에 답답해 보이지 않도록 글자와 이모지 주위에 여백을 두세요.
- 정사각형, 둥근 정사각형, 원형을 비교해 가장 또렷한 윤곽을 선택하세요.
- 512 px 미리보기뿐 아니라 내보낸 작은 아이콘도 확인하세요. 큰 화면에서 멋진 디자인이 16 px에서는 흐릿할 수 있습니다.
- 설치한 파비콘을 여러 브라우저에서 시험하고 밝은 브라우저 테마와 어두운 테마 모두에서 확인하세요.
생성한 파일을 사이트에 추가하기
생성된 파일 이름을 그대로 유지하고, 포함된 head 코드가 참조하는 위치에 파일을 놓으세요. 일반적으로 사이트 루트에 둡니다. 각 페이지 템플릿의 <head>에 코드를 붙여넣으세요. 프레임워크가 다른 디렉터리나 콘텐츠 전송 네트워크에서 정적 자산을 제공한다면 배포 전에 코드, 매니페스트, 브라우저 설정의 경로를 수정해야 합니다.
포함된 파일은 아이콘 참조를 제공하지만, 이것만으로 웹사이트가 설치 가능한 프로그레시브 웹 앱이 되지는 않습니다. 설치 기능에는 추가 매니페스트 항목, 보안 연결을 통한 호스팅, 브라우저별 조건이 필요할 수 있습니다.
자주 묻는 질문
네. 이니셜 한두 글자를 입력한 뒤 모양, 배경색, 전경색, 글꼴 스타일을 고를 수 있습니다. 짧은 글자만 받는 이유는 작은 파비콘에서도 더 쉽게 알아볼 수 있도록 하기 위해서입니다.
네. 이모지 하나를 선택하고 주변 모양과 배경색을 정할 수 있습니다. 이모지는 브라우저 고유의 모습을 유지하므로 운영체제와 브라우저에 따라 다르게 보일 수 있습니다. 다운로드 전에 미리보기를 확인하세요. 복잡한 이모지는 일부 브라우저에서 지원되지 않을 수 있습니다.
네. 16, 32, 48 px 프레임을 담은 favicon.ico와 별도의 16 px, 32 px PNG 파비콘, Apple, Android, Microsoft용 큰 아이콘이 포함됩니다.
파비콘 생성기는 이니셜, 짧은 글자, 이모지 하나로 새 디자인을 만듭니다. 파비콘 변환기는 기존 PNG, JPEG, WebP 이미지를 파비콘 파일로 바꾸는 별도의 도구입니다.
아니요. 글자 또는 이모지, 미리보기 렌더링, 파일 묶음 생성은 모두 브라우저 안에서 처리됩니다. 도구는 디자인을 업로드하거나 웹사이트를 가져오지 않습니다.
아니요. 사용자가 고른 설정만 적용하며 AI를 사용하지 않습니다. 이니셜, 이모지, 색상 또는 완성된 디자인이 상표나 다른 사람의 권리와 충돌하는지도 판단할 수 없습니다. 상업적으로 사용하기 전에 관련 권리를 확인하세요.
브라우저는 파비콘을 캐시하는 경우가 많습니다. 생성한 파일과 head 참조가 예상 경로에 배포되었는지 확인한 뒤 브라우저 캐시를 지우거나 비공개 창에서 시험하세요. 검색 엔진과 일부 플랫폼은 각자의 일정에 따라 아이콘을 갱신합니다.
관련 도구
PNG를 SVG로 벡터화
브라우저에서 PNG 래스터 이미지를 SVG 패스로 변환합니다. 로고, 아이콘, 선화에 적합하며 임계값, 색상 수, 스무딩을 조절할 수 있습니다.
바코드 생성기
Code 128, Code 39, EAN-13, UPC-A, ITF-14, Codabar로 스캔 가능한 1D 바코드를 만드세요. 인쇄용 PNG, SVG, PDF로 내보낼 수 있습니다.
GIF 제작기
이미지 시퀀스나 짧은 영상을 애니메이션 GIF로 변환합니다. 내보내기 전에 프레임률, 반복 횟수, 크기를 조정하세요.
QR 코드 리더
PNG, JPG, WebP 이미지에서 브라우저 안에서 QR 코드를 디코딩합니다. URL, Wi-Fi, vCard, SMS, 이메일, 캘린더, 위치, 텍스트 내용을 사용 전에 확인하세요.
대량 이미지 리사이저
여러 이미지를 끌어다 놓고 목표 크기에 맞추거나 늘린 뒤 JPG, PNG, WebP 파일을 하나의 ZIP으로 내보냅니다. 처리는 브라우저 안에서 끝납니다.
QR 코드 생성기
텍스트 또는 URL로 브라우저 안에서 QR 코드를 만들고 PNG로 다운로드하세요.