파비콘 만들기(ICO·PNG 한 번에)

사용 방법

1. "만들 방법"에서 이미지, 문자, 이모지 중 하나를 고릅니다.
2. 이미지는 파일을 고른 뒤 정사각형이 아닌 이미지를 "전체 넣기"로 할지 "가운데 자르기"로 할지 정합니다. 문자는 1~2자와 굵기·글자 색을, 이모지는 이모지 1개를 입력합니다.
3. 배경색, 배경 모양(사각형·둥근 모서리·원), 모서리 둥글기를 조정합니다. 배경을 투명하게 할 수도 있습니다. 바꾼 내용은 바로 미리보기에 반영됩니다.
4. 밝은 배경·어두운 배경·브라우저 탭에서 보이는 모습을 확인하고 "한꺼번에 ZIP으로 저장"을 누릅니다. 파일을 하나씩 저장할 수도 있습니다.
5. ZIP 안의 파일을 사이트 루트에 올리고, 표시된 HTML을 <head> 안에 붙여 넣습니다.

지원 형식과 제한

• 불러올 수 있는 이미지는 JPEG·PNG·WebP입니다(SVG·HEIC 불가).
• 이모지는 만들 때 사용한 기기의 OS·브라우저 이모지 글꼴로 그려집니다. 같은 이모지라도 Windows와 Apple 기기에서 모양이 다릅니다.
• 문자는 기기의 시스템 글꼴로 그리므로 기기마다 글자 모양이 조금 다를 수 있습니다. 글꼴은 고를 수 없습니다.
• 만드는 파일은 favicon.ico(16·32·48px), PNG(16·32·48·180·192·512px), site.webmanifest입니다. SVG 파비콘과 마스커블 아이콘은 만들지 않습니다.
• 16px처럼 작은 크기에서는 세밀한 무늬나 가는 선이 잘 보이지 않을 수 있습니다.

계산·변환 방식

크기마다 별도의 canvas에 그려 PNG로 저장합니다. 문자와 이모지는 크기별로 직접 그리므로 작은 아이콘도 흐려지지 않습니다. 이미지는 먼저 512px 정사각형에 맞춘 뒤 절반씩 단계적으로 줄입니다.

favicon.ico는 16·32·48px PNG를 그대로 담은 ICO 형식입니다. Windows Vista 이후와 현재 주요 브라우저가 지원합니다.

site.webmanifest에는 192px·512px 아이콘과 배경색(투명이면 흰색)을 theme_color·background_color로 기록합니다.