이니셜 및 이모지 파비콘 생성기

이미지를 따로 준비하지 않아도 단순하고 알아보기 쉬운 파비콘을 만들 수 있습니다. 이니셜 한두 글자를 입력하거나 이모지 하나를 선택한 뒤 모양과 배경색을 조정하세요. 글자 디자인에서는 문자 색상과 글꼴 스타일도 선택할 수 있지만, 이모지는 브라우저 고유의 모습을 유지합니다. 512 px 미리보기는 브라우저에서 바로 갱신되며, 완성된 다운로드에는 웹사이트에 디자인을 적용하는 데 필요한 작은 브라우저 아이콘, 모바일 아이콘, 설정 파일이 들어 있습니다. 어떤 내용도 업로드되지 않으며 AI도 사용하지 않습니다.

파비콘 만드는 방법

  1. 1

    아이콘 내용 선택

    간결한 레터마크를 만들려면 이니셜 한두 글자를 입력하고, 이모지를 쓰려면 하나를 선택하세요.

  2. 2

    디자인 꾸미기

    정사각형, 둥근 정사각형, 원 중에서 모양과 배경을 고르세요. 글자에는 문자 색상과 글꼴도 적용할 수 있지만, 이모지는 고유의 모습을 유지합니다.

  3. 3

    미리보기 확인

    512 px 미리보기를 확인하면서 16 px 브라우저 탭 아이콘으로 줄여도 디자인이 선명한지 생각해 보세요.

  4. 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 참조가 예상 경로에 배포되었는지 확인한 뒤 브라우저 캐시를 지우거나 비공개 창에서 시험하세요. 검색 엔진과 일부 플랫폼은 각자의 일정에 따라 아이콘을 갱신합니다.

관련 도구