파비콘은 브라우저 탭과 북마크, 검색 결과에 보이는 작은 아이콘입니다. 이미지 한 장만 있으면 만들 수 있지만, 형식과 크기를 잘못 고르면 흐릿하게 보이거나 아예 안 보일 수 있습니다.
어떤 이미지가 좋을까
- 정사각형이어야 합니다. 비율이 다르면 이 사이트는 비율을 유지한 채 가운데에 놓고 남는 곳을 투명으로 채웁니다.
- 단순한 모양이 좋습니다. 16×16처럼 아주 작게 보이는 곳이 있어서 글자가 많거나 디테일이 복잡하면 알아볼 수 없습니다. 굵은 도형이나 한두 글자가 잘 보입니다.
- 가능하면 큰 원본(예: 512×512 이상)에서 시작하세요. 큰 이미지를 줄이는 것은 괜찮지만 작은 이미지를 키우면 흐려집니다.
형식: ICO, PNG, SVG
| 형식 | 특징 |
|---|---|
| ICO | 전통적인 파비콘 형식. 윈도우 바로가기 아이콘 등 오래된 환경에서도 인식됩니다. 한 변 최대 256px |
| PNG | 최신 브라우저는 PNG 파비콘도 인식합니다. 투명 배경 지원 |
| SVG | 벡터라 어떤 크기에서도 선명하고 파일이 작습니다. 일부 환경은 지원하지 않을 수 있어 ICO나 PNG를 함께 두는 편이 안전합니다 |
Google 검색 결과에 파비콘을 보이게 하려면 Google 문서가 안내하는 조건(정사각형, 크기는 48px의 배수 등)을 확인하세요. 크기가 48의 배수이면 문제가 없습니다.
이 사이트에서 만드는 순서
- 로고 이미지(PNG, JPG, SVG 등)를 올립니다. 형식은 자동으로 감지됩니다.
- 저장 형식으로 ICO를 고릅니다. 원본이 256px보다 크면 비율을 유지해 256px 이하로 줄여서 저장됩니다.
- 크기를 정해 두고 싶다면 크기 옵션에서 직접 지정으로 정사각형(예: 128×128)을 고르면 됩니다. 정사각형이 아닌 원본은 "비율 유지 + 여백 채우기"로 가운데에 놓입니다.
- 변환 후 내려받은 파일 이름을
favicon.ico로 바꿔 사이트 최상위에 둡니다.
참고로 이 사이트의 파비콘도 SVG 로고를 이 변환기로 ICO로 바꿔 만들었습니다. 이 사이트의 ICO는 한 가지 크기의 이미지 한 장을 담습니다. 여러 크기(16, 32, 48 등)를 한 파일에 묶는 기능은 없습니다. 현대 브라우저는 큰 이미지를 알아서 줄여 쓰기 때문에 대부분 문제가 없습니다.
HTML에 연결하기
사이트의 head에 아래처럼 연결합니다. 파일이 어디에 있는지에 맞게 경로를 바꾸세요.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
apple-touch-icon은 아이폰 홈 화면에 추가할 때 쓰이는 아이콘으로, 보통 180×180 PNG를 권장합니다. 투명 배경은 검게 보일 수 있으니 배경색을 채운 PNG로 만들면 좋습니다. 이 사이트에서는 PNG로 저장하면서 크기를 180×180으로 지정하고 "투명·여백을 배경색으로 채우기"를 켜면 됩니다.
확인하는 법
브라우저는 파비콘을 강하게 캐시하므로 바꾼 뒤에도 옛 아이콘이 보일 수 있습니다. 새로고침(강력 새로고침)이나 시크릿 창에서 확인하세요.
PNG를 ICO로 바꾸기 SVG를 ICO로 바꾸기