블로그나 웹사이트를 만들었는데 브라우저 탭에 아무 아이콘도 없이 밋밋하게 보이시나요?
탭이 여러 개 열려 있을 때 내 사이트를 찾기 어렵고, 완성도가 떨어져 보이기도 합니다.
이럴 때 필요한 것이 파비콘입니다. 만드는 데 10분이면 충분하고 비용도 들지 않습니다.
이 글에서는 파비콘이 무엇인지부터 만드는 방법, 그리고 실제 적용까지 정리했습니다.
파비콘이란?
파비콘(Favicon)은 Favorite과 Icon을 합친 말입니다. 즐겨찾기 아이콘이라는 뜻이죠.
브라우저 탭, 주소창, 즐겨찾기 목록에 표시되는 작은 이미지입니다.
익숙한 예를 들어 보면 이해가 빠릅니다. 구글의 알록달록한 G, 유튜브의 빨간 재생 버튼, 네이버의 초록색 N이 모두 파비콘입니다.
이 작은 아이콘 하나로 사이트를 알아보게 되죠.
파비콘이 필요한 이유
없어도 사이트는 작동합니다. 하지만 있으면 좋은 이유가 몇 가지 있습니다.
탭에서 눈에 띕니다. 탭을 여러 개 열어 두면 제목이 잘려 보이지 않습니다. 이때 아이콘만으로 구분이 되죠.
즐겨찾기에서 찾기 쉽습니다. 북마크 목록에서 시각적으로 구별됩니다.
완성도가 달라 보입니다. 기본 아이콘 상태로 두면 아직 만들다 만 사이트 같은 인상을 줍니다.
스마트폰 홈 화면에도 쓰입니다. 방문자가 사이트를 홈 화면에 추가하면 이 아이콘이 앱처럼 표시됩니다.
브랜드 로고가 있다면 그것을 활용하는 것이 가장 좋습니다. 없어도 만들 수 있으니 걱정하지 마세요.
파비콘 만들기 방법
만드는 방법은 크게 두 가지입니다.
방법 1: 디자인 도구로 직접 만들기
미리캔버스나 캔바 같은 무료 도구를 쓰면 편합니다.
- 정사각형 캔버스를 만듭니다. 512×512 픽셀을 권합니다.
- 글자나 도형으로 간단한 디자인을 만듭니다.
- 배경이 투명한 PNG로 저장합니다.
여기서 중요한 점이 있습니다. 작게 만들지 마세요.
예전에는 16×16이나 32×32로 만들라는 안내가 많았지만, 지금은 고해상도 화면이 일반화되어 큰 크기로 만들어 두는 편이 낫습니다.
512×512로 만들어 두면 변환 도구가 알아서 여러 크기를 만들어 줍니다.
배경은 투명하게 해 두세요. JPG로 저장하면 흰 배경이 생겨 어두운 테마에서 어색해 보입니다.
방법 2: 자동 생성 도구 이용
디자인이 부담스럽다면 글자만 넣어 만들어 주는 도구도 있습니다.
사이트 이름의 첫 글자와 색상만 고르면 자동으로 만들어 줍니다. 단순하지만 깔끔합니다.
디자인할 때 지킬 것
파비콘은 실제로 아주 작게 보입니다. 그래서 원칙이 분명합니다.
- 요소는 하나만. 글자 한 글자나 단순한 도형이면 충분합니다.
- 글자는 최대 두 글자. 그 이상은 알아볼 수 없습니다.
- 대비를 강하게. 배경과 색이 비슷하면 뭉개져 보입니다.
- 가는 선은 피하세요. 축소하면 사라집니다.
만든 뒤에는 실제 크기로 축소해서 확인해 보세요. 큰 화면에서 예쁜 디자인이 작아지면 알아볼 수 없는 경우가 많습니다.
파비콘 변환 사이트
이미지를 만들었다면 파비콘 형식으로 변환합니다.
RealFaviconGenerator
가장 널리 쓰이는 도구입니다. 이미지를 올리면 모든 환경에 맞는 파일을 한 번에 만들어 줍니다.
브라우저 탭용, 아이폰 홈 화면용, 안드로이드용까지 각각 다른 크기로 생성됩니다.
미리보기 기능도 제공해서 실제로 어떻게 보일지 확인할 수 있습니다.
Favicon Generator
더 단순한 도구입니다. 이미지를 올리면 바로 변환된 파일을 받을 수 있습니다.
복잡한 설정 없이 빠르게 만들고 싶을 때 좋습니다.
ICO와 PNG, 뭘 써야 할까
예전 글에서는 “반드시 ICO 형식으로 변환해야 한다”는 안내가 많았습니다.
지금은 사정이 다릅니다. 현재 쓰이는 브라우저는 대부분 PNG 파비콘을 정상적으로 표시합니다.
ICO 형식이 필요했던 이유는 오래된 인터넷 익스플로러 때문이었는데, IE는 이미 지원이 종료되었습니다.
| 형식 | 특징 | 권장 |
|---|---|---|
| PNG | 투명 배경, 고화질 | 주력으로 사용 |
| ICO | 여러 크기 한 파일에 | 함께 두면 안전 |
| SVG | 확대해도 안 깨짐 | 최신 브라우저용 |
가장 안전한 방법은 변환 도구가 만들어 주는 세트를 통째로 쓰는 것입니다. PNG와 ICO가 함께 들어 있으니 신경 쓸 필요가 없습니다.
파비콘 적용하는 방법
만든 파비콘을 사이트에 적용하는 방법입니다.
워드프레스
가장 간단합니다. 외모 → 사용자 정의하기 → 사이트 아이덴티티에서 사이트 아이콘을 업로드하면 끝입니다.
워드프레스가 알아서 필요한 크기로 만들어 줍니다. 512×512 이상의 정사각형 PNG를 올리시면 됩니다.
티스토리
관리 → 꾸미기 → 스킨 편집에서 파비콘을 설정할 수 있습니다.
직접 만든 사이트
HTML의 head 부분에 링크 태그를 넣어 주면 됩니다.
변환 도구가 붙여 넣을 코드를 함께 제공하니 그대로 복사해 쓰시면 됩니다.
적용했는데 안 보인다면
가장 흔한 문제입니다. 대부분 캐시 때문입니다.
브라우저가 예전 상태를 기억하고 있어서 바로 반영되지 않습니다.
Ctrl + F5로 강력 새로고침을 해 보시거나, 브라우저 캐시를 삭제해 보세요.
그래도 안 되면 시크릿 모드에서 확인해 보시면 됩니다. 실제로는 적용되었는데 내 브라우저만 못 보고 있는 경우가 많습니다.
완전히 반영되기까지 하루 이틀 걸리기도 합니다.
만들 때 자주 겪는 문제
몇 가지 실무적인 조언을 덧붙이겠습니다.
파일명은 영문으로. 한글 파일명은 변환 도구에서 인식되지 않는 경우가 있습니다.
정사각형으로 만드세요. 직사각형 이미지를 올리면 찌그러지거나 잘립니다.
여백을 조금 두세요. 가장자리에 딱 붙은 디자인은 브라우저에 따라 잘려 보일 수 있습니다.
다크 모드를 고려하세요. 검은 배경에서도 보이는지 확인해 보시면 좋습니다. 어두운 색 아이콘은 다크 모드에서 사라져 보입니다.
마무리
정리하면 이렇습니다. 512×512 정사각형 PNG를 만들고, 변환 도구에 올려 세트를 받은 뒤, 사이트에 적용하면 끝입니다.
디자인은 단순할수록 좋습니다. 글자 한 글자만으로도 충분합니다.
작은 아이콘이지만 사이트의 인상을 꽤 바꿔 줍니다. 아직 없으시다면 오늘 한번 만들어 보세요.