파비콘 만들기

파비콘 만들기 사용법

브라우저 탭과 즐겨찾기, 휴대폰 홈 화면에 보이는 사이트 아이콘(파비콘)을 만드는 도구입니다. 로고 이미지가 있으면 이미지로, 아직 로고가 없으면 글자 한 자나 이모지로 바로 만들 수 있습니다. 필요한 크기의 파일을 모두 만들어 ZIP 하나로 묶고, HTML에 넣을 태그도 함께 줍니다.

글자나 이모지로 만들기

1. 글자·이모지로 탭에서 넣을 글자를 적습니다. 사이트 이름의 첫 글자 한 자가 가장 잘 보입니다. 옆의 버튼으로 예시 글자와 이모지를 넣어 볼 수 있습니다.
2. 글꼴, 글자 색, 글자 크기(아이콘 폭에 대한 비율)를 정합니다.
3. 배경 색과 모양(둥근 사각형, 사각형, 원)을 고릅니다.
4. 미리보기에서 16px 크기와 브라우저 탭 모습을 확인합니다. 실제로 가장 자주 보이는 크기가 16px이므로 이 크기에서 알아볼 수 있어야 합니다.
5. 파비콘 묶음 ZIP 받기를 누릅니다.

처음 열면 파란 둥근 사각형 바탕에 흰 글자 "도"가 들어 있습니다. 이 상태로 ZIP을 받으면 아래 표의 파일 8개가 들어 있습니다.

이미지로 만들기

이미지로 탭의 칸에 로고 파일을 끌어다 놓습니다. 정사각형이 아닌 이미지는 맞추기에서 꽉 채우기(넘치는 부분을 자름)와 전체가 보이게(남는 곳은 배경 색) 가운데 고릅니다. 가로로 긴 로고에서 심벌 부분만 쓰고 싶다면 확대를 키우고 가로 위치와 세로 위치를 -100에서 100 사이로 움직여 원하는 부분이 가운데 오게 합니다. 위치는 100일 때 이미지의 끝이 아이콘 가장자리에 닿습니다.

원본은 512px 이상의 정사각형 PNG나 SVG가 좋습니다. 180px보다 작은 이미지를 넣으면 큰 아이콘이 흐려질 수 있다고 알려 줍니다. 글씨가 많은 가로형 로고를 통째로 줄이면 16px에서는 점으로 보이므로, 심벌이나 첫 글자만 쓰는 편이 낫습니다.

ZIP에 들어 있는 파일

favicon.ico만 저장은 ICO 한 파일만, 512px PNG 저장은 가장 큰 PNG 한 장만 받습니다. ICO를 따로 변환해 주는 프로그램 없이 여기서 바로 만들어집니다.

사이트에 넣는 법

1. ZIP을 풀어 나온 파일을 사이트의 가장 위 폴더(첫 화면 파일이 있는 곳)에 올립니다.
2. 화면 아래 HTML의 head 안에 넣을 태그를 태그 복사로 복사해 모든 페이지의 head 안에 붙입니다.
3. 사이트 이름과 테마 색은 site.webmanifest와 theme-color 태그에 들어갑니다. 테마 색은 안드로이드 크롬의 주소창 색으로 쓰입니다.

블로그나 쇼핑몰 서비스를 쓴다면 관리 화면의 파비콘 등록 칸에 favicon.ico나 512px PNG 한 장만 올리면 되고 태그는 필요 없습니다.

잘 보이는 파비콘의 조건

• 16px에서도 알아볼 수 있게 단순해야 합니다. 글자는 한두 자, 선은 굵게 씁니다. 3자 이상을 넣으면 화면에 주의 문구가 나옵니다.
• 탭 색은 밝은 화면과 어두운 화면에서 다릅니다. 배경 투명으로 만든 어두운 글자는 어두운 탭에서 사라지므로, 배경 색을 채우는 편이 안전합니다.
• 배경을 투명하게 해도 apple-touch-icon.png는 흰 바탕을 채워 저장합니다. 아이폰이 투명한 부분을 검게 칠하기 때문입니다. 아이폰은 모서리도 스스로 둥글게 깎으므로 이 파일은 모양 설정과 관계없이 꽉 찬 정사각형으로 저장합니다.
• 안쪽 여백을 5~10% 주면 원 모양으로 잘리는 곳에서도 내용이 잘리지 않습니다.