파비콘 만드는 방법 완벽 정리 - 브라우저 탭 아이콘 직접 만들기
회색 지구본 아이콘은 이제 그만. 필요한 크기와 형식부터 HTML 적용까지, 파비콘 만드는 방법을 단계별로 알려드립니다.
웹사이트를 막 만들고 브라우저에서 열었는데, 탭에 우리 사이트만 밋밋한 회색 지구본 아이콘이 떠 있는 걸 본 적 있으신가요. 탭을 여러 개 열어두면 어느 게 내 사이트인지 한눈에 찾기도 어렵습니다. 이 작은 아이콘 하나가 파비콘입니다. 만드는 과정 자체는 생각보다 간단합니다.
파비콘이란 무엇이고 왜 중요할까
파비콘(favicon)은 favorite와 icon을 합친 말로, 브라우저 탭과 즐겨찾기 목록, 주소창 옆, 그리고 모바일 홈 화면에 표시되는 작은 아이콘입니다. 화면에서는 보통 16x16 픽셀 정도의 작은 크기로 보이지만, 사이트의 첫인상을 좌우하는 요소입니다.
탭을 10개 넘게 열어두고 작업하는 사람에게 파비콘은 사이트를 구분하는 거의 유일한 시각 단서입니다. 파비콘이 없으면 사이트가 미완성처럼 보이고, 즐겨찾기에 추가됐을 때도 다른 사이트들 사이에서 묻혀버립니다.
파비콘은 단순한 장식이 아니라 브랜드 인지도와 직결됩니다. 사용자는 익숙한 아이콘 모양만 보고 0.1초 만에 원하는 탭을 클릭합니다.
파비콘에 필요한 크기와 파일 형식
과거에는 favicon.ico 파일 하나만 루트 경로에 올리면 끝이었습니다. 지금도 이 방식은 동작하지만, PC와 모바일, 고해상도 디스플레이까지 모두 깔끔하게 대응하려면 여러 크기를 준비하는 편이 좋습니다.
| 크기 | 파일 형식 | 용도 |
|---|---|---|
| 16x16, 32x32 | ICO / PNG | 브라우저 탭, 주소창, 즐겨찾기 |
| 48x48 | ICO / PNG | 일부 데스크톱 환경 |
| 180x180 | PNG | iOS 홈 화면 (apple-touch-icon) |
| 192x192, 512x512 | PNG | 안드로이드, PWA 앱 아이콘 |
| 벡터 | SVG | 최신 브라우저, 무한 확대 대응 |
형식별 특징을 정리하면 다음과 같습니다.
- ICO: 하나의 파일 안에 여러 크기를 담을 수 있는 전통적인 형식입니다. 구형 브라우저까지 가장 폭넓게 호환됩니다.
- PNG: 투명 배경을 지원하고 압축이 좋아 가장 무난합니다. 크기별로 파일을 따로 준비합니다.
- SVG: 벡터라서 아무리 키워도 깨지지 않습니다. 최신 브라우저는 지원하지만, 구형 브라우저용으로 ICO나 PNG를 함께 두는 것이 안전합니다.
파비콘 만드는 방법 단계별 정리
방법은 크게 세 가지입니다. 자신의 상황에 맞는 것을 고르면 됩니다.
1. 온라인 생성기 사용 (가장 빠름)
favicon.io나 realfavicongenerator.net 같은 사이트에 이미지나 텍스트를 올리면 필요한 크기들을 자동으로 만들어 압축 파일로 내려받을 수 있습니다. HTML에 붙여 넣을 코드까지 생성해 주기 때문에 가장 손이 덜 갑니다. 디자인 경험이 없어도 머리글자와 색상만 지정하면 깔끔한 파비콘이 나옵니다.
2. 가지고 있는 이미지를 직접 가공
이미 로고나 캐릭터 이미지가 있다면 이를 정사각형으로 자른 뒤 크기를 줄여 사용할 수 있습니다. 포토샵이 없어도 됩니다. 정사각형으로 잘라낸 이미지를 이미지 리사이저 같은 무료 도구로 32x32, 16x16 픽셀로 줄이면 탭용 파비콘이 바로 완성됩니다. 원본 비율이 정사각형이 아니면 양옆이 잘리니, 줄이기 전에 정사각형 구도로 맞추는 것이 중요합니다.
3. SVG 직접 작성
코드를 다룰 수 있다면 SVG 파일을 직접 만드는 방법도 있습니다. 도형 한두 개로 이루어진 단순한 아이콘이라면 텍스트 에디터에서 몇 줄로 그릴 수 있고, 화질 걱정 없이 모든 해상도에 대응됩니다.
HTML에 파비콘 적용하는 방법
파일을 만들었다면 보통 사이트 루트 폴더에 넣고, HTML의 <head> 안에 링크 태그를 추가합니다. 기본 형태는 다음과 같습니다.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">각 줄의 역할은 이렇습니다.
- 첫 줄은 구형 브라우저까지 대응하는 기본 ICO 파일입니다.
- 둘째 줄은 SVG를 지원하는 최신 브라우저용입니다. 지원하는 브라우저는 이 SVG를 우선 사용합니다.
- 셋째 줄은 iOS에서 홈 화면에 추가했을 때 쓰이는 아이콘입니다.
favicon.ico 파일을 별도 링크 태그 없이 사이트 루트에 두기만 해도 대부분의 브라우저가 자동으로 인식합니다. 다만 SVG나 애플 터치 아이콘까지 쓰려면 위처럼 명시해 주는 편이 확실합니다.
모바일과 PWA 대응 파비콘
모바일에서 사용자가 사이트를 홈 화면에 추가하면, 파비콘이 앱 아이콘처럼 표시됩니다. 이때는 16x16 같은 작은 이미지로는 화질이 너무 떨어집니다. 그래서 180x180, 192x192, 512x512 크기를 따로 준비합니다.
웹앱(PWA)으로 동작시키려면 manifest.json 파일에 아이콘 정보를 등록합니다.
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}안드로이드는 이 매니페스트의 아이콘을, iOS는 apple-touch-icon을 참고합니다. 두 가지를 모두 준비해 두면 어느 기기에서 추가하든 또렷한 아이콘이 나타납니다.
자주 하는 실수와 해결법
파비콘을 올렸는데 화면에 바뀌지 않아 당황하는 경우가 많습니다. 대부분은 다음 원인 중 하나입니다.
- 브라우저 캐시: 파비콘은 브라우저가 오래 저장해 두는 대표적인 파일입니다. 새 파비콘이 안 보이면 강력 새로고침(Ctrl+Shift+R)을 하거나 시크릿 창에서 확인해 보세요.
- 경로 오류: 파일을 실제로 올린 위치와 링크 태그의 경로가 다르면 적용되지 않습니다. 브라우저 주소창에 직접 파비콘 주소를 입력해 이미지가 열리는지 확인하면 빠르게 진단됩니다.
- 크기 누락: 탭에서는 잘 보이는데 홈 화면 추가 시 흐릿하다면, 큰 크기(180x180 이상)를 준비하지 않은 경우입니다.
정리하면 파비콘 만들기는 세 단계로 끝납니다. 첫째, 단순하고 알아보기 쉬운 이미지를 준비합니다. 둘째, 필요한 크기로 변환합니다. 셋째, HTML과 매니페스트에 연결합니다. 지금 사용 중인 로고가 있다면 정사각형으로 자른 뒤 크기만 줄여 바로 적용해 보세요. 작은 아이콘 하나가 사이트의 완성도를 눈에 띄게 끌어올립니다.
