tigtools

파비콘 생성기

로고 또는 색상 배경에 한두 글자를 넣어 파비콘 세트를 만들고 HTML 태그를 복사하세요. 아이콘은 브라우저에서 생성됩니다.

브라우저에서 실행 가입 불필요

만들기 기준

문자 한두 개를 사용하는 것이 좋습니다. 처음 두 문자만 사용됩니다.

62%
모양

사용 방법

  1. 글자를 선택하고 원하는 색상으로 한두 글자를 입력하거나, 이미지를 선택하고 로고를 고르세요. 로고는 정사각형이며 512 px 이상인 것이 좋습니다.
  2. 브라우저 탭에 표시되는 16 및 32 px 아이콘을 포함해 각 크기의 미리보기를 확인하세요.
  3. ZIP 파일을 다운로드하고 안에 있는 파일을 웹사이트의 루트 폴더에 업로드하세요.
  4. HTML 태그를 페이지의 head 섹션에 붙여넣고, 필요한 경우 site.webmanifest의 이름을 수정하세요.

작동 방식

브라우저와 기기는 서로 다른 위치에서 아이콘을 찾습니다. 여기서 생성하는 아이콘 세트는 일반적인 사용 사례를 지원합니다. 브라우저 탭, 북마크 및 /favicon.ico를 자동으로 요청하는 구형 소프트웨어를 위한 16, 32, 48 px 이미지가 포함된 favicon.ico, link 태그로 지정하는 16 및 32 px PNG 파일, iPhone 또는 iPad의 홈 화면에 사이트를 추가할 때 사용하는 180 × 180 apple-touch-icon, Android 홈 화면과 설치형 웹 앱을 위해 site.webmanifest에서 지정하는 192 및 512 px 아이콘이 포함됩니다.

favicon.ico 파일은 모든 최신 브라우저와 Windows Vista 이상에서 읽을 수 있도록 ICO 컨테이너 안에 아이콘을 PNG 이미지로 저장합니다. ICO와 ZIP 파일은 이 페이지의 코드에서 생성되며 서버로 전송되지 않습니다.

작은 아이콘에는 단순한 디자인이 적합합니다. 16 × 16픽셀에서는 가는 선과 작은 글자가 사라지므로, 글자가 있는 전체 로고보다 굵은 글자나 단순화한 로고 심벌이 더 잘 보입니다. 이미지는 여러 단계로 고품질 축소됩니다. iOS는 투명한 영역을 검은색으로 채우므로 apple-touch-icon에는 항상 단색 배경이 적용됩니다. 모서리는 iOS에서 자동으로 둥글게 처리합니다.

새 아이콘을 업로드한 뒤에도 브라우저가 캐시를 오래 유지하고 적극적으로 활용하기 때문에 한동안 이전 파비콘이 표시될 수 있습니다. 강력 새로고침을 하거나 /favicon.ico를 직접 열면 보통 해결됩니다.

예시

새 프로젝트용 글자 아이콘

짙은 녹색의 둥근 사각형에 흰색으로 "TG"를 입력하면 별도의 로고 디자인 없이도 브라우저 탭의 16 × 16 px 크기에서 잘 보이는 깔끔한 아이콘을 만들 수 있습니다.

기존 로고로 아이콘 만들기

투명한 배경의 1024 × 1024 PNG 로고를 업로드하고 이미지 전체 맞춤을 선택하면, 투명한 탭 아이콘과 브랜드 색상을 배경으로 한 apple-touch-icon을 만들 수 있습니다.

가로형 로고

1200 × 300 크기의 워드마크에서 가운데 자르기를 선택하면 중앙의 글자만 남습니다. 이미지 전체 맞춤을 선택하면 모든 요소가 포함되지만 크기가 너무 작아집니다. 보통은 별도의 정사각형 로고 심벌이 더 잘 어울립니다.

자주 묻는 질문

favicon.ico가 아직도 필요한가요?

여전히 유용합니다. 일부 브라우저, 피드 리더 및 도구는 link 태그가 없어도 사이트 루트에서 /favicon.ico를 요청합니다. 최신 브라우저는 HTML에서 지정한 PNG 아이콘도 사용합니다.

파일을 어디에 넣어야 하나요?

홈페이지와 같은 위치인 웹사이트의 루트 폴더에 파일을 업로드하세요. 그러면 /favicon.ico와 HTML에 지정된 다른 경로가 작동합니다. 하위 폴더를 사용한다면 link 태그와 site.webmanifest의 경로를 변경하세요.

이전 파비콘이 계속 표시되는 이유는 무엇인가요?

브라우저는 파비콘을 별도로, 그리고 오랫동안 캐시합니다. 강력 새로고침을 하거나 새 탭에서 /favicon.ico를 열거나 시크릿 창에서 확인해 보세요. favicon-v2.ico처럼 파일 이름을 바꾸면 다시 불러오도록 할 수도 있습니다.

SVG 파비콘도 생성하나요?

아니요. 어디서나 사용할 수 있는 PNG 및 ICO 파일을 만듭니다. SVG 로고가 이미 있다면 이 파일들과 함께 type이 image/svg+xml인 link 태그를 추가할 수 있습니다.

개인정보 보호

아이콘, ICO 파일 및 ZIP은 브라우저에서 생성됩니다. 이미지와 텍스트는 업로드되거나 저장되지 않으며 분석 데이터에 포함되지 않습니다.