파비콘이 빠지면 검색 결과에서 눈에 잘 안 띄고 클릭도 덜 받게 돼요. 하지만 기기에 딱 맞는 파비콘을 넣으면 사용하기도 편하고 브랜드 신뢰도도 높일 수 있답니다.
파비콘이 뭐고 검색엔진 최적화(SEO)에서 왜 중요할까요?
파비콘(Favicon)은 ‘Favorites Icon’의 줄임말이에요. 브라우저 탭이나 즐겨찾기 목록은 물론이고, 요즘엔 구글 검색 결과 페이지의 주소 옆에도 뜨는 아주 중요한 그림이죠. 단순히 예쁜 아이콘을 넘어, 사용자가 수많은 탭 사이에서 우리 사이트를 바로 찾을 수 있게 도와주기 때문에 사이트를 기억하게 만드는 데 큰 역할을 해요.
특히 모바일과 PC 구글 검색 결과에 파비콘이 나오면서 사람들이 눌러보는 비율인 클릭률(CTR)에도 영향을 주게 되었어요. 파비콘이 없거나 기본 아이콘 그대로라면 왠지 사이트가 덜 꼼꼼해 보일 수 있거든요. 그럼 방문자들이 덜 믿게 되고, 장기적으로는 검색엔진 점수에도 안 좋은 영향을 줄 수 있어요.
기기마다 딱 맞는 파비콘 크기와 파일 형식
예전에는 16×16 크기의 ICO 파일 하나면 충분했지만, 지금은 레티나 디스플레이나 다양한 스마트폰 화면에 맞추기 위해 여러 해상도를 준비해야 해요. 선명한 고화질 파비콘은 방문하는 사람들을 기분 좋게 만드는 중요한 포인트랍니다.
| 어디에 쓰이나요? | 권장 크기 (픽셀) | 권장 파일 형식 | 특징 및 장점 |
|---|---|---|---|
| 브라우저 탭 | 16×16, 32×32 | ICO, PNG | 가장 기본적인 식별 아이콘이에요 |
| 바탕화면 바로가기 | 48×48, 64×64 | ICO, PNG | 고해상도 모니터에서 잘 보여요 |
| 스마트폰 홈화면 | 180×180, 192×192 | PNG (애플 터치 아이콘) | 모바일 환경에 딱 맞게 보여요 |
| 구글 검색 결과 | 48의 배수 권장 | PNG, SVG | 검색 결과에서 클릭을 유도해요 |
기술적 SEO 적용: HTML 코드 넣는 법
검색 엔진 로봇이 파비콘을 잘 찾아서 검색 결과에 보여주려면 head 부분에 코드를 잘 넣어줘야 해요. 아래 코드를 복사해서 쓰면 대부분의 기기에서 문제없이 잘 보일 거예요.
<!-- 표준 ICO 파비콘 (옛날 브라우저 호환용) -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<!-- 요즘 브라우저용 PNG 파비콘 -->
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<!-- 애플 기기용 터치 아이콘 -->
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
여기서 rel=”icon”은 브라우저한테 이게 파비콘 리소스라고 알려주는 거고, sizes는 각 기기 화면에 맞는 크기를 골라 쓰라고 알려주는 거예요. href는 이미지 파일이 있는 실제 위치인데, 보통 루트 폴더에 넣는 게 관리가 편해요.
파비콘 만들 때 신경 쓸 점
- 심플한 게 최고예요: 16×16처럼 아주 작은 크기에서도 모양을 알아볼 수 있도록 로고를 최대한 단순하게 만드는 게 좋아요.
- 배경은 투명하게: 다크 모드나 브라우저 테마 색상이 달라도 어색하지 않게 배경이 투명한 PNG 파일을 쓰는 게 보기에 훨씬 깔끔해요.
- 일관성 있게: 파비콘은 브랜드 로고랑 비슷한 느낌을 유지해야 방문자들이 우리 브랜드를 더 잘 기억할 수 있어요.
자주 묻는 질문 (FAQ)
Q1. 파비콘을 바꿨는데 검색 결과에는 자꾸 예전 아이콘이 나와요.
구글 검색 로봇이 사이트를 다시 읽어가서 정보를 업데이트하는 데 시간이 좀 걸려서 그래요. 구글 서치 콘솔에서 ‘URL 검사’를 하고 ‘색인 생성 요청’을 누르면 반영 시간을 좀 더 당길 수 있어요.
Q2. 파일 이름은 꼭 favicon.ico여야 하나요?
HTML 코드로 파일 경로를 직접 지정하면 이름은 상관없어요. 하지만 브라우저가 기본적으로 favicon.ico라는 파일을 찾으려고 시도하기 때문에, 호환성을 위해 루트 폴더에 이 이름으로 파일을 하나 두는 게 기술적으로 더 안전해요.
Q3. 파비콘이 있으면 검색 순위가 오르나요?
순위 점수에 직접 들어가는 항목은 아니지만, 파비콘이 있으면 눈에 잘 띄어서 클릭을 더 많이 받게 돼요. 사람들이 많이 클릭하면 검색엔진이 “어, 이 사이트 내용이 괜찮나 보네?”라고 생각해서 간접적으로 순위가 오르는 데 도움이 된답니다.
