이 작업 예시를 따라 한 다음, 동일한 컨트롤을 본인의 이미지에 적용해 보세요. 파비콘 / ICO 생성기 열기.
선명한 로고를 선택하거나 이니셜로 시작하세요
Favicon / ICO Generator를 열고 Image를 선택하세요. PNG, JPG, JPEG, WebP 또는 GIF를 업로드하거나 Try a sample을 선택하세요. 작업 예제는 투명한 모서리가 있는 512 × 512 픽셀 보라색 궤도 표시인 favicon-orbit.png을 사용합니다. 입력 크기는 202,491 바이트입니다.
완성된 로고가 없는 브랜드의 경우 도구 페이지에서 텍스트를 선택하세요. 한두 글자를 입력하고 계속를 선택하세요. 편집기는 Modern sans, Classic serif, Monospace 글꼴과 별도의 텍스트 및 배경색을 제공합니다. 최대 세 글자까지 허용되지만, 글자 수가 많아지면 작은 크기에서 인식하기 어려울 수 있습니다.
원본 아트워크를 보관하세요. 생성기는 새 아이콘 파일을 만들며 원본을 덮어쓰지 않습니다. GIF 입력은 애니메이션 파비콘이 아닌 정지 아이콘이 됩니다.
모노그램의 경우 글꼴 메뉴는 세 가지 포함된 스타일로 시작합니다. 지원되는 데스크톱 브라우저에서 시스템 글꼴 사용를 선택하고 장치에 설치된 글꼴을 추가할 수 있는 권한을 허용하세요. 이전 및 다음 꺾쇠괄호를 사용하여 인접한 글꼴을 비교하거나, 패밀리를 선택하고 특히 16 픽셀에서 라이브 미리보기를 검사하세요. 글꼴은 장치에 유지되며 포함된 스타일은 권한 없이 작동합니다.
단순한 실루엣을 사용하세요. 상세한 사진은 512 픽셀에서는 매력적으로 보일 수 있지만 16 픽셀에서는 희미한 점으로 보일 수 있습니다.
프레임을 다듬고 작은 미리보기를 검사하세요
편집기는 밝은색 및 어두운색 브라우저 탭과 일반적인 아이콘 크기의 미리보기를 표시합니다. 먼저 16 픽셀 예제를 확인하세요. 이는 표시가 인식 가능한 상태로 유지되는지 확인하는 가장 엄격한 테스트입니다. Apple Touch 미리보기는 180 픽셀 내보내기를 나타내며 작업 공간에서 더 작게 표시됩니다.
휴대전화에서 Settings를 여세요. Create from을 Uploaded image로, Image fit을 전체 이미지 표시로 설정하세요. 이 샘플의 경우 Space around content를 0으로 설정하고 투명 배경를 활성화하세요. 소스에는 이미 자체적인 둥근 보라색 모양과 투명한 여백이 포함되어 있으므로 추가적인 색상 배경이 필요하지 않습니다.
다른 소스의 경우 전체 이미지 표시는 가장자리를 유지하지만, Fill the icon은 가장자리를 자를 수 있습니다. Rounded square, Square, Circle은 외부 모양을 정의합니다. 투명 배경는 투명한 영역을 보존하지만 사진에 이미 그려진 불투명한 배경은 제거할 수 없습니다. 프레임을 변경할 때마다 가장 작은 미리보기를 검토하세요.
투명한 모서리가 있는 로고에 별도의 불투명한 배경을 추가하면 원치 않는 두 번째 프레임이 생길 수 있습니다. 두 배경 선택 사항을 모두 미리 보세요.
이 가이드의 예시
샘플 사용해 보기: favicon-orbit.png, 512 × 512 px. 업로드된 이미지; 전체 이미지 표시; 둥근 정사각형; 콘텐츠 주변 여백 0%; 투명 배경 활성화; 웹사이트 아이콘 패키지(ZIP); 웹사이트 이름 My website.
- 원본 이미지
- 512 × 512 PNG · 202,491 바이트
- ICO개의 프레임
- 16, 24, 32, 48, 64, 128 및 256 px
- 패키지
- 9개의 파일 · 304,351 바이트
- 표시된 결과
- 실제 256 × 256 ICO 프레임
다중 크기 ICO 또는 웹사이트 패키지를 선택하세요
다운로드에서 이 예시를 위해 웹사이트 아이콘 패키지(ZIP)를 선택하세요. 웹사이트 이름은 샘플용으로 'My website'로 두거나, 본인의 프로젝트에 맞는 실제 브랜드 이름으로 바꾸세요. 이 이름은 site.webmanifest에 사용되며, 이미지 위에 텍스트로 추가되지 않습니다.
시작을 선택하세요. 브라우저가 favicon.ico개의 프레임으로 구성된 16, 24, 32, 48, 64, 128 및 256 픽셀 크기의 정사각형 이미지를 생성합니다. 또한 PNG개의 아이콘을 16, 32, 48, 180, 192 및 512 픽셀 크기로 생성하며, 매니페스트와 설치 지침도 함께 만듭니다. 결과물은 아이콘마다 별도의 다운로드 버튼을 누를 필요 없이 하나의 ZIP 파일로 제공됩니다.
클래식 favicon.ico만 필요한 경우, 대신 다중 크기 ICO을 선택하세요. 이는 웹사이트 플랫폼이 ICO 업로드를 허용하고 별도의 패키지가 필요하지 않을 때 유용합니다.
이 패키지는 웹사이트 아이콘 에셋 세트입니다. 사이트를 자동으로 프로그레시브 웹 앱으로 전환하지는 않습니다.
아이콘 파일 다운로드, 설치 및 확인
다운로드를 누르면 website-icons.zip이 저장됩니다. 실제 작업 예시에는 9개의 파일이 포함되어 있으며 크기는 304,351 바이트입니다. 위의 비교는 시뮬레이션된 브라우저 스크린샷이 아니라, 512 픽셀 원본 옆에 내보낸 256에서 추출한 실제 ICO 프레임을 보여줍니다.
ZIP 파일의 압축을 풀고 아이콘 파일을 웹사이트 루트에 업로드한 뒤 INSTALL.txt을 읽어보세요. 여기에는 HTML 아이콘, Apple Touch 아이콘 및 웹 매니페스트를 위한 ICO, PNG 링크 태그가 포함되어 있습니다. 파일을 하위 폴더에 배치하는 경우, HTML 경로와 site.webmanifest 내부의 아이콘 경로를 모두 업데이트하세요.
새 브라우저 탭과 확인이 필요한 기기에서 사이트를 확인하세요. 브라우저는 파비콘을 캐시할 수 있으므로, 이전 아이콘이 보인다고 해서 설치가 실패한 것은 아닙니다. 편집기를 새로 고치면 메인 도구 페이지로 돌아가므로, 새로 고침 전에 원본 이미지와 다운로드한 패키지를 보관해 두세요.
하나의 표준 아이콘 위치를 선택하고 HTML 경로를 일관되게 유지하세요. 생성기는 에셋을 만들 뿐이며, 이를 게시하는 것은 웹사이트 워크플로우의 일부입니다.
자주 묻는 질문
로고를 업로드하지 않고 파비콘을 만들 수 있나요?
네. '텍스트'를 선택하고 이니셜을 입력한 다음, 편집기에서 글꼴, 색상, 모양 및 간격을 선택하세요.
ICO 파일에는 어떤 크기가 포함되어 있나요?
ICO에는 PNG 기반의 7개 프레임(16, 24, 32, 48, 64, 128, 256 픽셀 정사각형)이 포함되어 있습니다. 브라우저가 적절한 프레임을 선택합니다.
웹사이트 ZIP에는 무엇이 포함되어 있나요?
여기에는 favicon.ico, 브라우저/Apple/Android용 6개 PNG 아이콘, site.webmanifest 및 HTML 링크 태그가 포함된 INSTALL.txt가 들어 있습니다.
파비콘에 투명 배경을 적용할 수 있나요?
네. '투명 배경'을 활성화하세요. 이는 소스 주변의 투명 영역을 보존하며, 사진의 불투명한 배경을 제거하지는 않습니다.
변환을 위해 이미지가 업로드되나요?
아니요. 이 도구는 브라우저에서 아이콘 파일을 생성하고 패키징합니다. 편집기는 영구적인 프로젝트 저장소가 아니므로 다운로드한 파일을 보관하세요.
컴퓨터에 설치된 글꼴을 사용할 수 있나요?
네, 브라우저가 로컬 글꼴 액세스를 지원하는 경우 가능합니다. '텍스트/모노그램'을 선택하고 '시스템 글꼴 사용'을 선택한 뒤 브라우저 권한을 허용하세요. 사용 가능한 글꼴 패밀리가 글꼴 목록에 나타납니다. 권한이 거부되거나 로컬 글꼴 액세스를 사용할 수 없는 경우 포함된 스타일을 계속 사용할 수 있습니다.
다음 웹사이트에 명확하고 작은 시그니처를 부여하세요.
샘플을 사용하거나 직접 파일을 사용해 보고, 공유하기 전에 결과를 검토하세요.
