브라우저 탭에 뜨는 작은 아이콘, 파비콘.
뭔지, 왜 필요한지, 어떻게 만드는지 — 코드 없이도 이해하고, 코드로 바로 적용해봐요.
Favorite Icon의 줄임말 — 브라우저 탭 위에 뜨는 그 작은 아이콘의 모든 것
웹사이트를 열 때 브라우저 탭 왼쪽에 작은 아이콘이 보이죠? 그게 파비콘(Favicon)이에요.
"Favorite Icon"의 줄임말로, 1999년 Internet Explorer 5가 처음 도입했고, 이후 W3C 공식 표준이 됐어요.
기본 크기는 16×16px이지만, 고해상도 화면 대응을 위해 32px, 48px, 180px까지 다양하게 제공하는 게 좋아요.
파비콘이 없어도 사이트는 정상 동작해요. 하지만 없으면 탭에 지구본 🌐 아이콘이나 빈 네모가 뜨고, 여러 탭을 동시에 열었을 때 내 사이트를 찾기 어려워져요. 단 몇 줄의 코드로 추가할 수 있는데, 사이트의 첫인상과 신뢰감에 생각보다 큰 영향을 줘요.
사람들은 평균 10개 이상의 탭을 동시에 열어둬요. 파비콘이 있어야 내 사이트 탭을 텍스트 없이도 빠르게 찾을 수 있어요.
사용자가 사이트를 즐겨찾기에 추가하면 파비콘이 아이콘으로 표시돼요. 없으면 어느 사이트인지 나중에 알기 어려워요.
iOS/Android에서 홈 화면에 추가하면 파비콘이 앱 아이콘처럼 보여요. apple-touch-icon을 별도 설정하면 훨씬 깔끔해요.
모바일 구글 검색 결과 목록에 파비콘이 함께 표시돼요. 없으면 기본 아이콘이 뜨고, 클릭률에 영향을 줄 수 있어요.
구글 애드센스 승인 심사 시, 파비콘이 있는 사이트가 더 완성도 높은 사이트로 평가받아요. 심사관 입장에서 신뢰도가 높아 보여요.
유명한 사이트들은 파비콘만 봐도 바로 알아볼 수 있어요. 파비콘 하나가 브랜드의 첫 번째 시각적 신호가 돼요.
결론: SVG를 메인으로, PNG를 폴백으로 쓰는 게 가장 좋아요.
| 형식 | 권장도 | 장점 | 단점 |
|---|---|---|---|
.svg |
✅ 권장 | 모든 크기에서 선명, 파일 가벼움, 코드로 바로 편집, 다크모드 대응 가능 | Internet Explorer 미지원 (2022년 서비스 종료됐으니 무시 가능) |
.png |
👍 보조 | 모든 브라우저 지원, 투명 배경 가능, 32×32 ~ 64×64 권장 | 크기마다 별도 파일 필요, SVG보다 파일 크기 큼, 확대 시 뭉개질 수 있음 |
.ico |
🗿 레거시 | IE 포함 구형 브라우저 지원, 한 파일에 여러 크기 포함 가능 | 만들기 번거로움, 요즘은 쓸 이유가 거의 없음 |
파비콘 SVG를 직접 그리기 어려우면 AI한테 만들어 달라고 해도 돼요. 아래 프롬프트를 Claude나 ChatGPT에 붙여넣으면 바로 쓸 수 있는 SVG 코드를 받을 수 있어요.
받은 코드를 favicon.svg로 저장하고 public/ 폴더에 넣으면 끝이에요.
이 페이지 아래의 ④ 편집기에서 실시간으로 수정해볼 수도 있어요.
내 사이트 이름은 "바이브툴킷"이야. 개발 도구 모음 사이트인데 파비콘 SVG를 만들어줘. 요구사항: - viewBox="0 0 52 52" 기준 - 배경: 인디고 색상 (#4f46e5), 모서리 둥글게 (rx="11") - 아이콘: 번개 모양, 흰색 - 파일로 바로 저장할 수 있게 전체 SVG 코드로 줘 - 코드에 한국어 주석 달아줘 (초보자가 수정할 수 있게)
사이트 성격에 따라 어울리는 파비콘 스타일이 달라요. 클릭하면 ④ 편집기에 코드가 자동으로 불려와요.
처음 보면 낯선 코드들이지만, 각각 하는 일을 알면 직접 수정하는 게 어렵지 않아요.
아래 코드를 <head> 태그 안에 붙여넣으면 파비콘이 적용돼요.
<head> <!-- ① SVG 파비콘 (권장 — 어떤 크기에서도 선명) --> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <!-- ② PNG 폴백 (SVG 미지원 브라우저 대비) --> <link rel="icon" href="/favicon.png" type="image/png"> <!-- ③ iOS 홈 화면 추가용 (180×180 PNG 따로 필요) --> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> </head>
파비콘 SVG 파일에서 자주 보이는 속성들이 무슨 뜻인지 알아봐요.
"icon"이면 파비콘, "stylesheet"이면 CSS, "apple-touch-icon"이면 iOS 홈 화면 아이콘이에요./가 붙으면 사이트 루트 기준이에요. Astro, Next.js, Vite는 public/ 폴더가 루트로 서빙돼서 public/favicon.svg 파일이 /favicon.svg로 접근돼요.0 0 52 52는 "왼쪽 위 (0,0), 오른쪽 아래 (52,52)"예요. 이 안에 그린 도형은 SVG가 어떤 크기로 표시되든 같은 비율로 자동 조절돼요.fill은 도형의 채우기 색상(HEX 코드)이에요. rx는 사각형 모서리 둥글기예요. rx="0"이면 직각, rx="26"이면 완전한 원(52÷2=26)이 돼요.색상 코드(HEX)가 뭐예요?
#4f46e5처럼 # 뒤에 6자리 영문+숫자 조합이에요. 앞 두 자리가 빨강(R), 중간이 초록(G), 뒤가 파랑(B) 강도예요. #000000은 검정, #ffffff는 흰색이에요. 구글에 "color picker"를 검색하면 원하는 색의 HEX 코드를 바로 얻을 수 있어요.
위 갤러리에서 마음에 드는 파비콘을 클릭하거나, 코드를 직접 붙여넣어 수정해보세요. 수정하는 즉시 왼쪽 미리보기가 업데이트돼요.
사용 방법: ② 갤러리 클릭 → 코드 자동 로드 → 색상 코드(#HEX)나 숫자 수정 → 왼쪽 미리보기 확인 → 복사 버튼으로 코드 가져가기
파비콘 작업을 하다 막히면 여기서 먼저 찾아봐요.
브라우저 캐시 때문이에요. 파비콘은 브라우저가 꽤 오랫동안 캐시에 저장해둬서, 파일을 바꿔도 바로 반영이 안 될 수 있어요.
해결 방법: 강력 새로고침을 해보세요. Windows/Linux는 Ctrl + Shift + R, Mac은 Cmd + Shift + R이에요. 그래도 안 된다면 시크릿 창(프라이빗 창)에서 열어보거나, 개발자 도구(F12) → Network 탭 → "Disable cache" 체크 후 새로고침하면 돼요.
프레임워크에 따라 조금 달라요.
Astro / Next.js / Vite: public/favicon.svg로 저장하면 자동으로 /favicon.svg로 접근돼요.
그냥 HTML 파일: index.html과 같은 폴더에 두면 돼요. 이 경우 href="favicon.svg"처럼 상대 경로로 연결해요.
GitHub Pages: 루트에 favicon.svg를 두면 /favicon.svg로 접근돼요.
SVG를 쓰면 크기 걱정이 없어요. SVG는 벡터 그래픽이라 16px에서도, 512px에서도 동일하게 선명하게 보여요.
PNG나 ICO를 써야 한다면: 32×32px 하나로 대부분 커버되고, 고해상도 대응까지 하고 싶으면 64×64px도 준비해요. iOS 홈 화면 아이콘은 별도로 180×180px PNG가 필요해요 (apple-touch-icon.png).
직접적인 승인 기준에 파비콘이 명시되어 있지는 않아요. 하지만 애드센스 심사는 사이트 전체 완성도를 봐요. 파비콘이 없으면 헤더, 푸터, 메뉴가 없는 것처럼 "미완성 사이트"로 보일 수 있어요.
반대로 파비콘이 있으면 탭에서 브랜드가 보이고, 북마크에서도 아이콘이 뜨고, 구글 검색 결과에도 표시돼서 사이트 신뢰도와 완성도를 높이는 데 확실히 도움이 돼요. 승인을 목표로 한다면 파비콘은 기본 중의 기본으로 챙겨두세요.
괜찮아요. 세 가지 방법이 있어요.
① 이 페이지 갤러리 활용: 위 갤러리에서 마음에 드는 파비콘을 클릭하고, ④ 편집기에서 색상 코드만 바꾸면 돼요. SVG 구조를 몰라도 색상 값(#HEX)만 바꾸면 돼요.
② AI 활용: ① 개념 섹션의 "바이브코더 TIP" 프롬프트를 복사해서 Claude나 ChatGPT에 붙여넣어보세요. 바로 쓸 수 있는 SVG 코드를 만들어줘요.
③ Favicon.io 사이트: favicon.io에서 텍스트나 이모지로 파비콘을 자동 생성할 수 있어요.
SVG의 장점 중 하나가 다크모드 대응이에요. SVG 파일 안에 CSS 미디어 쿼리를 넣으면 라이트/다크 모드에 따라 다른 색상을 적용할 수 있어요.
간단한 해결책: 배경색이 있는 파비콘을 사용하면 돼요. 이 페이지 갤러리의 파비콘들처럼 배경 <rect>에 색상을 지정하면 어떤 배경에서도 잘 보여요. 투명 배경 파비콘은 다크모드에서 묻힐 수 있어요.
파비콘을 추가했다면 사이트 완성도를 높이는 다음 도구들을 만들어봐요. 바이브 코딩으로 하나씩 추가해봐요.
바이브 코딩 팁: 한 번에 다 만들려고 하지 마세요. 파비콘 하나 추가하고 배포, 플로팅 버튼 추가하고 배포 — 이렇게 하나씩 쌓아가는 게 바이브 코딩의 방식이에요. 작은 성공이 쌓이면 결국 완성도 높은 사이트가 돼요.