콘텐츠로 건너뛰기
Monu Tools

Favicon 생성기

이미지 하나로 완전한 favicon 세트를 만드세요. .ico 파일, 다양한 크기의 PNG, Apple touch icon, web manifest까지 브라우저에서 바로 생성됩니다.

Favicon 생성기 사용 방법

  1. 01

    정사각형 이미지를 업로드하세요. 심플한 로고나 아이콘이 가장 잘 어울리며, 브라우저에서 바로 처리됩니다.

  2. 02

    필요에 따라 배경을 선택하고 web manifest에 사용할 사이트 이름을 입력하세요.

  3. 03

    ZIP을 다운로드한 후 HTML 코드를 페이지 head에 붙여넣으세요.

파비콘이란?

파비콘은 브라우저 탭, 북마크 및 휴대폰 홈 화면에 표시되는 작은 아이콘이에요. 사이트를 완성되고 알아볼 수 있게 만드는 작은 세부 사항이며 최신 브라우저는 여러 버전을 기대해요.

하나의 이미지로는 충분하지 않은 이유

문제는 더 이상 하나의 이미지만으로는 충분하지 않다는 것이에요. 클래식 브라우저용 다중 크기 .ico, 별도의 PNG 크기, iOS 홈 화면용 Apple 터치 아이콘, Android용 더 큰 PNG 및 사이트를 설치하려면 웹 매니페스트가 필요해요.

이 생성기는 실제 다중 크기 .ico를 포함하여 단일 이미지에서 전체 세트를 구축하고 페이지 헤드에 놓을 정확한 HTML 스니펫을 제공하므로 이를 조합하거나 직접 작성할 필요가 없어요.

업로드할 이미지

최상의 결과를 얻으려면 아이콘이 매우 작게 표시되는 경우가 많으므로 최소 512px의 정사각형 이미지를 업로드하세요. 이상적으로는 자세한 사진보다는 간단한 로고나 마크를 업로드하는 것이 좋아요. 정사각형이 아닌 이미지는 중앙에 배치되고 정사각형으로 채워지므로 가장자리 근처의 세부 묘사가 여백에 들어갈 수 있어요.

배경색 및 사이트 이름

선택적으로 배경색과 사이트 이름을 설정할 수 있어요. 사이트 이름은 누군가 홈 화면에 사이트를 추가할 때 사용되는 웹 매니페스트에 포함돼요.

브라우저에서 실행돼요.

Canvas API를 사용하면 모든 것이 브라우저에서 로컬로 실행되므로 이미지가 업로드되지 않아요. 붙여넣을 모든 파일과 코드 조각이 포함된 ZIP 파일을 다운로드해요.

자주 묻는 질문

favicon 패키지에는 무엇이 포함되어 있나요?

16, 32, 48 px 크기의 favicon.ico, 각각의 16 및 32 px PNG 파일, 180 px Apple touch icon, Android용 192 및 512 px PNG, site.webmanifest, 페이지 head에 붙여넣을 HTML 코드가 포함되어 있습니다.

어떤 이미지를 업로드해야 하나요?

최소 512 px 이상의 정사각형 이미지가 가장 좋습니다. 심플한 로고나 마크가 이상적입니다. 정사각형이 아닌 이미지는 가운데 정렬 후 여백이 추가되므로, 가장자리 근처의 세부 요소가 여백 안쪽에 위치할 수 있습니다.

이미지가 업로드되나요?

아니요. 아이콘은 Canvas API를 사용해 브라우저에서 생성되므로, 이미지가 기기 밖으로 전송되지 않습니다.

출처

문제 신고