글자 파비콘 생성기

글자 파비콘이 만들어지는 원리

파비콘은 브라우저 탭·즐겨찾기·홈 화면 아이콘에 뜨는 작은 사이트 상징 이미지입니다. 이 도구는 입력한 글자(1~2자)를 지정한 배경색 위에 큰 크기로 얹어 Canvas에 직접 그린 뒤 PNG 이미지로 내보냅니다. 배경을 정사각형으로 채우고, 글자를 가운데에 최대한 크게 배치하는 방식이라 16px 같은 아주 작은 크기로 줄여도 형태가 남습니다. 글자 추출·색 채우기·이미지 그리기까지 전부 브라우저 안에서 처리하므로 입력한 내용이 서버로 전송되지 않습니다.

실제 사용 순서

먼저 탭에 띄우고 싶은 글자를 넣습니다. 파비콘은 표시 영역이 매우 작아 글자는 1자, 많아야 2자를 권합니다. 사이트 이름이 "다잇다"라면 "다", "Money Boya"라면 "M" 또는 "MB"처럼 대표 글자만 남기는 식입니다. 그다음 배경색을 브랜드 색으로 지정하고, 글자 색은 배경과 대비가 큰 색(밝은 배경엔 어두운 글자, 어두운 배경엔 흰 글자)으로 맞춥니다. 미리보기로 작게 줄였을 때도 글자가 읽히는지 확인한 뒤 다운로드합니다.

파비콘 크기와 파일

브라우저는 화면 밀도와 위치에 따라 여러 크기의 파비콘을 씁니다. 대표적인 규격은 아래와 같습니다.

이 도구는 정사각형 PNG를 만들어 줍니다. 큰 크기(예: 192px 이상)로 한 번 뽑아 두면 브라우저가 필요할 때 줄여서 쓰기 때문에 실무에서 다루기 편합니다.

이런 상황에 씁니다

디자이너 없이 새 사이트를 띄울 때, 아직 로고가 없는 블로그·랜딩페이지·사내 도구, 여러 프로젝트를 색만 바꿔 구분하고 싶을 때 씁니다. 로고 이미지 대신 브랜드 첫 글자와 색만으로도 탭에서 사이트를 알아보게 만들 수 있어, 임시 파비콘이나 개인 프로젝트용으로 충분합니다.

선명하게 뽑는 팁

글자는 굵고 단순한 것이 유리합니다. 획이 많은 한자나 3자 이상은 16px에서 뭉개지니 피하세요. 배경과 글자는 명도 차이를 크게 둬야 작게 줄여도 구분됩니다. 파스텔 배경에 흰 글자처럼 대비가 약한 조합은 탭에서 흐릿해집니다. 원형으로 잘리는 환경(일부 홈 화면 아이콘)을 고려한다면 글자를 살짝 안쪽으로 두어 모서리에서 잘리지 않게 하세요. 다운로드한 PNG를 HTML의 <link rel="icon">에 연결하면 적용됩니다.

자주 묻는 질문