파비콘 만들기

이미지 한 장으로 필요한 아이콘 파일을 모두 만듭니다

파비콘은 브라우저 탭과 즐겨찾기 목록에 뜨는 작은 사각형 그림입니다. 홈페이지에 이 그림을 제대로 붙이려면 파일 하나로는 모자랍니다. 브라우저 탭은 favicon.ico를 찾고, 아이폰 홈 화면은 180픽셀 PNG를, 안드로이드 홈 화면은 192픽셀과 512픽셀 PNG를 각각 요구하기 때문입니다. 이 도구는 이미지 한 장을 넣으면 이 파일들을 한꺼번에 만들어 ZIP으로 묶어 줍니다.

만들어지는 것은 16·32·48픽셀을 한 파일에 담은 favicon.ico, 크기별 PNG 세 개, 아이폰용 apple-touch-icon.png, 안드로이드용 192·512픽셀 PNG, 그리고 HTML에 붙여넣을 head-snippet.html입니다. 속도는 이 페이지의 테스트 이미지로 재어 보니 PC 크롬에서 800×600 PNG가 0.06초, 13메가바이트 사진이 0.62초, 60메가바이트 PNG가 1.6초였습니다.

쓰는 순서

1. 아이콘으로 쓸 이미지 한 장을 고릅니다. 정사각형이면 가장 좋습니다.
2. 필요하면 원형으로 자르기를 켜거나 배경색을 정합니다.
3. 「파비콘 만들기」를 누르고 ZIP을 내려받아 웹 서버에 올립니다.

정사각형이 아니면 가운데를 잘라 씁니다

아이콘은 가로세로가 같아야 하므로 직사각형 이미지를 넣으면 짧은 변에 맞춰 정사각형을 오려 냅니다. 오리는 자리는 언제나 이미지 한가운데입니다. 세로로 긴 사진이라면 위아래가, 가로로 긴 사진이라면 좌우가 잘려 나갑니다. 로고가 가운데에 있지 않은 이미지는 잘린 자리에 로고가 걸릴 수 있으니, 이미지 자르기에서 먼저 원하는 구도로 정사각형을 만든 뒤 넣으세요.

원본 크기는 512픽셀 이상을 권합니다. 만들어야 할 가장 큰 파일이 512픽셀이라 그보다 작은 이미지를 넣으면 확대되면서 흐려집니다. 반대로 아주 큰 사진을 넣어도 결과는 같은 크기로 줄어드니 화질에 손해는 없습니다. 60메가바이트짜리 PNG도 1.6초에 처리됐습니다.

원형 자르기와 배경색은 이렇게 쓰입니다

원형으로 자르기를 켜면 정사각형 안에 꽉 차는 원만 남기고 바깥 네 귀퉁이를 투명하게 비웁니다. 안드로이드와 아이폰이 홈 화면에서 아이콘 모서리를 자기 방식대로 둥글리는데, 그 결과를 미리 정해 두고 싶을 때 씁니다. 다만 브라우저 탭은 아이콘을 둥글리지 않으므로 탭에서는 원이 그대로 보입니다.

배경색을 비워 두면 원본의 투명한 부분이 그대로 투명하게 남습니다. 흰 바탕 웹페이지에서는 괜찮지만, 어두운 화면 설정에서 검은 로고가 배경에 묻힐 수 있습니다. 색을 정하면 그 색을 먼저 칠한 뒤 그림을 올리므로 어느 배경에서도 같게 보입니다. 아이폰 홈 화면 아이콘은 투명한 자리를 검게 칠하는 경우가 있어, 투명 배경 로고라면 배경색을 지정해 두는 편이 안전합니다.

이 도구가 하는 일과 하지 않는 일