파비콘 만들기
올린 이미지 한 장으로 사이트에 필요한 아이콘 한 벌을 만들고 바로 붙여 넣으세요.
도구를 준비하고 있어요.
파비콘 만들기 상세 가이드
사용법과 예제를 살펴보고, 궁금한 내용은 주제별로 찾아보세요.
시작 전에 한눈에 보기
- 원본
- PNG·JPG·WebP·SVG 한 장을 20MB까지 받습니다.
- 최소 크기
- 가로세로 모두 16픽셀 이상이어야 합니다.
- ICO 구성
- favicon.ico 한 파일에 16·32·48·64·128·256픽셀을 담습니다.
- ICO 방식
- 64픽셀 이하는 32비트 BMP, 그보다 큰 크기는 PNG로 넣습니다.
- PNG 목록
- 16·32·48·180·192·512픽셀을 각각 만듭니다.
- 비율
- 전체 담기와 꽉 채우기 모두 원본 비율을 유지합니다.
- 투명도
- 기본은 그대로 두고 원하면 고른 색으로 채웁니다.
- 처리 위치
- 변환은 이 브라우저에서 이뤄지며 원본을 서버로 보내지 않습니다.
파비콘 만들기 사용 순서
이미지를 한 장 올리세요
정사각형에 가까운 이미지가 가장 깔끔합니다. 너무 작으면 키워도 흐려지므로 512픽셀 이상을 권합니다. 파일을 끌어다 놓거나 파일 선택을 누르면 됩니다.
정사각형에 맞추는 방식을 고르세요
전체 담기는 이미지 전체가 들어가고 남는 자리를 비워 둡니다. 투명한 로고에 어울립니다. 꽉 채우기는 짧은 변에 맞추고 넘치는 부분을 잘라내므로 사진에 어울립니다. 어느 쪽이든 비율은 그대로입니다. 투명한 부분을 색으로 덮고 싶다면 배경 채우기를 켜고 색을 고르세요.
만들고 탭 미리보기로 확인하세요
실제 탭과 같은 16픽셀 크기로 그린 미리보기를 보여줍니다. 큰 로고는 작게 줄이면 뭉개지는 일이 많으니 여기서 알아볼 수 있는지 먼저 확인하세요. 알아보기 어렵다면 글자를 빼고 심볼만 남긴 이미지로 다시 만드는 편이 낫습니다.
ZIP으로 받고 코드를 넣으세요
파일을 사이트의 최상위 폴더에 올린 뒤 함께 나오는 코드를 <head> 안에 붙여 넣습니다. 코드에는 실제로 만든 파일 이름만 적혀 있어 없는 파일을 가리키지 않습니다.
이런 작업에 활용하세요
브라우저와 기기마다 다른 크기를 한 번에
브라우저 탭은 16과 32픽셀, 윈도우 바로가기는 48픽셀, 아이폰 홈 화면은 180픽셀, 안드로이드는 192와 512픽셀을 씁니다. 한 번 만들면 이 크기를 모두 만들고 favicon.ico에는 16·32·48·64·128·256픽셀을 한 파일에 담습니다. 64픽셀 이하는 32비트 BMP로, 그보다 큰 크기는 PNG로 넣어 옛 윈도우와 최신 브라우저 모두에서 열립니다.
작게 줄여도 알아볼 수 있는지 먼저 확인
큰 로고가 16픽셀에서는 뭉개지는 경우가 많습니다. 만들고 나면 실제 탭과 같은 16픽셀 크기로 그린 미리보기를 보여주므로 줄인 모습을 먼저 확인할 수 있습니다. 정사각형이 아닌 이미지는 전체 담기와 꽉 채우기 중에서 고르며 어느 쪽이든 비율은 그대로 유지합니다.
예제로 결과 이해하기
가로로 긴 로고를 32픽셀에 맞추기
원본 800 × 400px
크기 32px전체 담기 → 32 × 16px로 그리고 위아래 8px씩 비움
꽉 채우기 → 64 × 32px로 키우고 좌우 16px씩 잘라냄만들어진 삽입 코드
기본 설정으로 만들기<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">맞추는 방식 고르기
표를 좌우로 밀어 나머지 내용을 확인하세요.
| 방식 | 어떻게 되나 | 어울리는 경우 |
|---|---|---|
| 전체 담기 | 전체가 들어가고 남는 자리는 비웁니다. | 투명 배경의 로고, 글자가 포함된 심볼 |
| 꽉 채우기 | 짧은 변을 채우고 넘치는 부분을 자릅니다. | 사진, 가장자리가 중요하지 않은 이미지 |
| 배경 채우기 | 투명한 부분을 고른 색으로 덮습니다. | 어두운 탭에서 흰 로고가 묻힐 때 |
결과가 예상과 다를 때
탭에 옛 아이콘이 그대로 보입니다
브라우저가 파비콘을 오래 저장해 둡니다. 강력 새로 고침을 하거나 탭을 닫았다 열어 보세요. 그래도 남으면 주소 뒤에 ?v=2 같은 값을 붙여 새 파일임을 알려 주면 됩니다.
16픽셀에서 무슨 그림인지 모르겠습니다
작은 크기에서는 글자와 가는 선이 사라집니다. 로고에서 글자를 빼고 심볼만 크게 남긴 이미지로 다시 만들어 보세요. 탭 미리보기로 바로 확인할 수 있습니다.
이미지가 너무 작다고 나옵니다
가로세로 모두 16픽셀 이상이어야 합니다. 현재 크기를 함께 알려 드리니 더 큰 원본으로 다시 올려 주세요. 작은 이미지를 키우면 흐려집니다.
배경이 검게 보입니다
투명한 부분은 그대로 두는 것이 기본입니다. 검게 보인다면 원본에 이미 검은 배경이 있는 경우입니다. 배경 채우기를 켜고 원하는 색을 고르면 그 색으로 덮입니다.
알아두면 쉬운 용어
- 파비콘
- 브라우저 탭과 북마크에 보이는 작은 사이트 아이콘입니다.
- ICO
- 여러 크기의 이미지를 한 파일에 담는 아이콘 형식입니다. 브라우저가 상황에 맞는 크기를 골라 씁니다.
- apple-touch-icon
- 아이폰과 아이패드에서 홈 화면에 추가할 때 쓰는 180픽셀 아이콘입니다.
- 웹 매니페스트
- 안드로이드에서 홈 화면에 추가할 때 쓰는 아이콘과 정보를 적어 두는 파일입니다.
파비콘 만들기 자주 묻는 질문
확장자만 ico로 바꾼 파일인가요?
아닙니다. ICO 규격대로 머리말과 항목 표를 만들고 크기별 이미지를 한 파일에 담습니다. 만든 뒤 파일을 다시 읽어 담긴 크기를 확인합니다.
투명한 로고를 넣으면 배경이 검게 되나요?
투명도를 그대로 유지합니다. 배경을 채우고 싶을 때만 색을 골라 채울 수 있습니다.
삽입 코드에 없는 파일이 적혀 있지는 않나요?
실제로 만든 파일 이름만으로 코드를 만듭니다. 안드로이드 아이콘은 링크 대신 site.webmanifest로 연결합니다.
SVG를 올려도 되나요?
됩니다. 브라우저가 그린 결과를 각 크기의 그림으로 만듭니다. 다만 결과 파일은 PNG와 ICO이며 SVG 파비콘 자체를 만들지는 않습니다.
올린 이미지가 서버에 저장되나요?
저장되지 않습니다. 이미지 읽기와 크기 변환, ICO 묶기, ZIP 만들기까지 모두 이 브라우저 안에서 이뤄집니다.
왜 크기가 이렇게 많이 필요한가요?
브라우저 탭, 윈도우 바로가기, 아이폰 홈 화면, 안드로이드 설치 화면이 각각 다른 크기를 씁니다. 필요한 것만 골라 올려도 되지만 한 벌을 모두 두면 어디서든 또렷하게 보입니다.