파비콘 만들기

파비콘 세트, 크기별 파일이 필요한 이유

언제 쓰나요

블로그를 직접 만들었거나 회사 소개 페이지를 새로 열었는데 탭 앞에 회색 지구본이나 빈 문서 그림만 보인다면 파비콘 파일이 빠진 상태예요. 디자이너에게 아이콘을 맡기기엔 일이 작고, 로고 파일 하나로 여러 크기를 일일이 잘라 내기는 번거로울 때 이 도구로 한 번에 묶음을 만들어요. 동아리 이름 첫 글자나 이모지 하나만으로도 충분히 알아보기 쉬운 아이콘이 돼요.

사용 방법

1단계글자 또는 이미지 정하기

1. 1① 글자로 만들지 로고 그림으로 만들지 골라요. 이미지 탭에서는 정사각형에 가까운 그림이 가장 꽉 차게 들어가요.
2. 2② 기본값 ‘홍’처럼 한 글자를 넣으면 아이콘 크기의 66%, 두 글자는 46%, 세 글자 이상은 34% 크기로 그려요.

2단계배경과 모양 고르기

1. 3③ 배경색과 모양을 고르고, 홈 화면에 표시될 사이트 이름을 적어요. 고르는 즉시 아래 미리보기가 다시 그려져요.

3단계확인하고 묶음 받기

1. 4④ ZIP에는 ICO 1개, PNG 5개, 매니페스트, 코드 파일까지 8개가 들어 있어요.
2. 5⑤ 이 코드를 사이트 <head> 안에 붙이고, 파일들은 사이트 최상위 폴더에 올려요. 코드 속 주소가 모두 /로 시작하기 때문이에요.
3. 6⑥ 128·48·32·16px 미리보기와 탭 모양 미리보기로 작은 크기에서도 알아보는지 확인해요. 16px 칸은 확대해서 픽셀이 그대로 보이게 그려요.

크기별로 그리는 방식

작은 아이콘을 큰 그림에서 줄이기만 하면 획이 뭉개져요. 그래서 이 도구는 512px 하나를 만들어 줄이지 않고, 필요한 크기마다 캔버스를 새로 만들어 글자나 그림을 다시 그려요. 둥근 사각형의 모서리 반지름은 한 변의 22%, 이미지는 테두리 안쪽으로 한 변의 12%씩 여백을 두고 비율을 지켜 넣어요.

ICO 파일 안에는 세 크기의 PNG가 그대로 들어 있고, 앞부분 머리 정보가 각 그림의 크기와 위치를 적어 둬요. 매니페스트의 짧은 이름은 사이트 이름 앞 12자까지만 잘라 쓰고, 테마 색은 고른 배경색으로 채워요.

글자 아이콘은 사이트 기본 굵은 글꼴로 그려요. 글꼴을 다 받기 전에 그린 미리보기는 잠깐 다른 글꼴로 보일 수 있지만, 글꼴이 준비되면 저절로 다시 그려요.

주의할 점

• 투명 배경과 180px 아이콘 — 아이폰은 투명한 곳을 검게 채우기 때문에, 180px 파일만은 어떤 모양을 골라도 배경색으로 꽉 찬 정사각형으로 만들어요. 모서리는 아이폰이 알아서 둥글게 깎아요.
• 이모지 모양 — 이모지는 지금 쓰는 기기의 이모지 글꼴로 그려져서, 같은 이모지라도 만든 컴퓨터에 따라 결과 그림이 달라요.
• 글자 칸은 네 글자까지 — 입력 칸이 4자로 제한돼 있어요. 세 글자부터는 16px에서 거의 읽히지 않으니 미리보기로 꼭 확인하세요.

더 궁금한 점