블로그스팟 파비콘 설정하는 법 (아이콘 안 뜨는 문제 포함)
📋 목차
블로그스팟 파비콘을 분명 업로드했는데 브라우저 탭에 주황색 B 아이콘이 그대로 남아 있다면, 이미지 사이즈나 캐시 문제일 가능성이 높거든요. 설정 메뉴부터 HTML 직접 삽입, 그리고 안 뜨는 원인까지 제가 겪은 그대로 정리해 봤어요.
블로그스팟을 처음 만들면 탭에 기본 Blogger 로고가 뜨잖아요. 저도 그게 싫어서 바로 파비콘부터 바꿨는데, 바꿨다고 생각했는데 새로고침을 아무리 눌러도 반영이 안 되는 거예요. 크롬 탭에는 여전히 그 주황색 B. 속이 터지더라고요.
결국 원인을 하나씩 찾아보니까 이미지 포맷 문제, 사이즈 문제, 브라우저 캐시 문제가 뒤엉켜 있었어요. 한 가지만 고치면 되는 게 아니라 여러 조건을 동시에 맞춰야 하더라고요. 그래서 삽질한 과정 그대로, 해결책까지 풀어볼게요.
파비콘이 뭐고 왜 필요한 건지
파비콘(Favicon)은 Favorite Icon의 줄임말이에요. 브라우저 탭 왼쪽에 뜨는 그 작은 아이콘. 북마크할 때도 나오고, 모바일에서 홈 화면에 추가하면 앱 아이콘처럼 보이기도 하거든요.
이게 왜 중요하냐면, 구글 검색결과에도 파비콘이 노출돼요. 검색결과 페이지에서 사이트 이름 옆에 작은 아이콘이 뜨는 거 보셨죠? 그게 파비콘이에요. 기본 Blogger 로고가 그대로 뜨면 다른 블로그스팟 사이트와 전혀 구분이 안 되니까, 브랜딩 면에서 손해가 꽤 커요.
저는 처음에 "어차피 작은 아이콘인데 뭐" 하고 넘겼거든요. 근데 서치 콘솔에서 내 블로그가 검색에 뜬 걸 보니까 옆에 주황색 B가 박혀 있는 게 영 신경 쓰이더라고요. 그때부터 제대로 설정하겠다고 마음먹었어요.
파비콘 이미지 사이즈와 포맷 기준
여기서부터 삽질이 시작됐어요. 파비콘이라고 아무 이미지나 올리면 되는 게 아니거든요.
블로그스팟 관리자에서 업로드할 때 기본 조건은 100KB 미만의 정사각형 이미지예요. 포맷은 PNG, ICO, BMP를 지원하고요. 근데 실제로 깔끔하게 적용되려면 48x48px의 배수로 만드는 게 좋아요. 구글 공식 문서에서도 "48px 배수의 정사각형"을 권장하거든요. 16x16은 너무 작아서 흐릿하게 보이고, 512x512는 과한 편이에요.
| 사이즈 | 용도 | 적합도 |
|---|---|---|
| 16x16px | 레거시 브라우저 탭 | 최소 기준, 흐릿할 수 있음 |
| 32x32px | 고해상도 탭, 북마크바 | 대부분의 경우 무난 |
| 48x48px | 구글 검색결과 노출 | 구글 권장 최소 기준 |
| 180x180px | 애플 기기 홈화면 | iOS 대응 시 필요 |
제가 실수했던 건 처음에 300x250 직사각형 이미지를 올린 거예요. 업로드 자체는 됐는데 탭에서 찌그러져 보이더라고요. 정사각형이 아니면 자동으로 잘리거나 비율이 깨져요. 그리고 WEBP 포맷은 업로드가 안 되는 경우가 있어서, PNG가 가장 무난했어요.
📊 실제 데이터
구글 공식 가이드라인에 따르면 파비콘은 48px의 배수인 정사각형(1:1 비율)이어야 하고, 8x8px 미만은 인식하지 않아요. 검색결과 노출을 위해서는 최소 48x48px을 맞춰야 구글이 수집해 간다고 명시되어 있거든요.
블로그스팟 관리자에서 파비콘 설정하는 과정
설정 자체는 생각보다 간단해요. Blogger 대시보드에 로그인하고 왼쪽 메뉴에서 설정(Settings)을 클릭하면, 상단 "기본" 항목 아래쪽에 "파비콘"이라는 메뉴가 있거든요.
파비콘을 클릭하면 파일 업로드 창이 뜨는데, 여기서 미리 만들어 둔 PNG나 ICO 파일을 선택해요. 100KB 미만이어야 하고, 정사각형이어야 하고요. 선택하면 미리보기가 뜨는데, 여기서 이미지가 정상적으로 보이면 "저장" 버튼을 누르면 끝이에요.
근데 저장을 눌러도 바로 반영이 안 돼요. 이게 함정이거든요. "저장했는데 왜 안 바뀌지?" 하고 당황하는 분들이 많은데, 브라우저 캐시 때문에 바로 안 보이는 게 정상이에요. 저도 처음에 뭘 잘못했나 싶어서 세 번이나 다시 업로드했어요.
저장 후 확인하는 가장 빠른 방법은 크롬 시크릿 모드(Ctrl+Shift+N)로 내 블로그에 접속하는 거예요. 시크릿 모드는 캐시가 없으니까 새로 설정한 파비콘이 바로 보이거든요. 일반 모드에서는 길면 이틀까지도 이전 아이콘이 남아 있을 수 있어요.
테마 HTML에 직접 link 태그 넣는 방법
관리자 설정에서 올렸는데도 계속 문제가 생기면, HTML을 직접 수정하는 방법이 있어요. 저는 결국 이 방법으로 해결했거든요.
Blogger 대시보드에서 테마(Theme) → 맞춤설정 옆 드롭다운 → HTML 편집을 누르면 테마의 전체 HTML 코드가 보여요. 여기서 <head> 태그를 찾아야 해요. Ctrl+F로 검색하면 금방 나오거든요.
<head> 바로 아래에 이런 코드를 넣어요.
<link rel="icon" type="image/png" href="파비콘 이미지 URL" />
<link rel="apple-touch-icon" href="파비콘 이미지 URL" />
여기서 "파비콘 이미지 URL"에는 실제 이미지 주소가 들어가야 해요. 관리자에서 파비콘을 한 번 업로드하면 구글 서버에 이미지가 올라가는데, 그 주소를 크롬 개발자 도구(F12)에서 찾을 수 있어요. 또는 별도로 이미지를 호스팅해서 그 URL을 넣어도 돼요.
주의할 게 하나 있어요. 블로그스팟 기본 테마에는 이미 파비콘 관련 코드가 숨어 있는 경우가 있거든요. 기존 코드랑 충돌하면 오히려 안 뜰 수 있어요. 그래서 HTML 편집 화면에서 "favicon"으로 검색해서 기존에 있는 link 태그가 있으면 그걸 수정하는 게 더 안전해요. 없으면 새로 추가하고요.
💡 꿀팁
HTML 편집 전에 반드시 현재 테마 코드를 백업해 두세요. 테마 페이지 상단에 "백업/복원" 버튼이 있어요. 실수로 코드를 날려도 바로 복구할 수 있거든요. 저는 이거 안 해놓고 한번 멘붕 온 적 있어요.
파비콘이 안 뜨는 원인과 해결법
이게 핵심이에요. 분명 설정했는데 안 뜨는 이유, 생각보다 여러 가지가 겹쳐 있거든요.
가장 흔한 원인 첫 번째는 브라우저 캐시예요. 크롬은 파비콘을 꽤 오래 캐시에 저장해요. 강력 새로고침(Ctrl+Shift+R)을 해도 파비콘 캐시는 안 지워지는 경우가 많아요. 확실하게 확인하려면 시크릿 모드로 접속하거나, 브라우저 설정에서 캐시를 완전히 삭제해야 해요.
두 번째는 이미지 사이즈 문제예요. 아까 말씀드렸듯이 정사각형이 아니거나, 8px 미만이거나, 100KB를 초과하면 업로드는 되더라도 제대로 표시가 안 돼요. 특히 구글 검색결과에서 안 뜨는 경우는 48px 배수를 안 맞춰서인 경우가 많아요.
세 번째, 파일 포맷 호환성이에요. ICO 포맷이 전통적으로 가장 호환성이 좋은데, 블로그스팟에서는 PNG도 잘 작동해요. 다만 WEBP나 SVG를 올리면 인식 못 하는 경우가 있더라고요. JPG도 지원은 하지만 투명 배경이 필요하면 PNG가 답이에요.
네 번째가 좀 미묘한데, 테마 코드 충돌이에요. 외부에서 가져온 커스텀 테마를 쓰는 경우, 테마 자체에 파비콘 경로가 하드코딩되어 있을 수 있어요. 관리자에서 아무리 바꿔도 테마 HTML에 박힌 경로가 우선 적용되니까 안 바뀌는 거죠. 이럴 때는 아까 말한 HTML 편집에서 직접 수정해야 해요.
다섯 번째, 반영 시간이에요. 블로그스팟에서 파비콘을 변경하면 구글 서버에서 전파되는 데 시간이 걸려요. 빠르면 몇 시간, 느리면 2~3일까지도요. 특히 구글 검색결과에 새 파비콘이 반영되려면 구글봇이 다시 크롤링을 해야 하니까 더 오래 걸리거든요.
⚠️ 주의
파비콘이 안 뜬다고 짧은 시간 안에 여러 번 반복해서 업로드하면 오히려 캐시가 꼬여서 더 늦게 반영될 수 있어요. 한 번 설정하고 시크릿 모드에서 확인한 뒤, 정상이면 일반 브라우저에서는 며칠 기다려 보는 게 좋아요.
구글 검색결과에 파비콘 노출시키기
브라우저 탭에서는 보이는데 구글 검색결과에는 안 뜨는 경우가 있어요. 이건 별개의 문제거든요.
구글이 검색결과에 파비콘을 표시하려면 몇 가지 조건이 있어요. 우선 홈페이지(루트 도메인)의 head 태그에 파비콘 link 태그가 있어야 해요. 그리고 구글봇이 해당 파비콘 URL에 접근할 수 있어야 하고요. robots.txt에서 파비콘 경로를 차단하고 있으면 구글이 수집을 못 해요.
구글 공식 문서에 따르면, 파비콘 URL을 자주 바꾸지 말라고 되어 있어요. URL 자체를 바꾸면 구글이 다시 수집해야 하니까 반영이 늦어지거든요. 이미지 파일만 교체하는 건 괜찮아요. 같은 URL에 새 이미지를 덮어쓰는 방식이 가장 빠르게 반영돼요.
저는 서치 콘솔에서 URL 검사 도구로 홈페이지 URL을 다시 크롤링 요청했어요. 그랬더니 약 일주일 뒤에 검색결과에 새 파비콘이 뜨기 시작했거든요. 바로 되진 않지만, 아무것도 안 하고 기다리는 것보다는 빨랐어요.
설정 후 반드시 확인해야 할 체크리스트
파비콘 설정을 끝냈으면 바로 넘어가지 말고 몇 가지 확인해 보는 게 좋아요. 저도 이걸 안 해서 한 달 넘게 파비콘이 깨진 채로 방치한 적 있거든요.
첫 번째, 시크릿 모드에서 내 블로그 접속해서 탭에 아이콘이 정상적으로 뜨는지 봐요. 여기서 안 보이면 업로드 자체가 제대로 안 된 거예요. 두 번째, 모바일 브라우저에서도 확인해요. PC에서는 보이는데 모바일에서 안 뜨는 경우가 간혹 있거든요. 사이즈가 너무 작으면 모바일에서 무시되는 경우가 있어요.
세 번째, 크롬 개발자 도구(F12)를 열어서 Network 탭에서 "favicon"으로 필터링하면 실제로 어떤 파비콘 파일이 로딩되고 있는지 확인할 수 있어요. 여기서 404 에러가 뜨면 경로가 잘못된 거고, 200이 뜨는데 안 보이면 캐시 문제인 거죠.
네 번째, 구글 서치 콘솔에서 URL 검사를 해요. "라이브 URL 테스트"를 하면 구글봇이 현재 시점에 내 사이트를 어떻게 보는지 확인할 수 있고, 파비콘 수집 상태도 간접적으로 알 수 있어요.
💬 직접 써본 경험
저는 처음에 128x128px PNG를 올렸다가 구글 검색결과에서 안 떠서, 96x96px(48의 배수)로 다시 만들어 올렸거든요. 그랬더니 열흘 정도 뒤에 검색결과에 제대로 반영됐어요. 브라우저 탭에서는 둘 다 잘 보였는데, 구글 검색 노출은 사이즈 규격을 꼭 맞춰야 하더라고요.
자주 묻는 질문
Q. 파비콘을 ICO로 만들어야 하나요, PNG로 해도 되나요?
블로그스팟에서는 PNG도 문제없이 작동해요. 다만 IE 같은 아주 오래된 브라우저까지 지원하려면 ICO가 더 안전하긴 해요. 요즘은 PNG 48x48px이면 거의 모든 환경에서 잘 보여요.
Q. 파비콘 변경 후 구글 검색결과에 반영되기까지 얼마나 걸리나요?
구글봇의 크롤링 주기에 따라 다른데, 보통 며칠에서 2주 정도 소요돼요. 서치 콘솔에서 크롤링 요청을 하면 조금 더 빨라질 수 있어요.
Q. 블로그스팟 기본 테마가 아닌 외부 테마를 쓰는데, 관리자에서 파비콘이 안 바뀌어요.
외부 테마에 파비콘 경로가 하드코딩되어 있을 가능성이 높아요. 테마 HTML 편집에서 "favicon"을 검색한 뒤 해당 link 태그의 href를 직접 수정하면 해결돼요.
Q. 투명 배경 파비콘을 만들고 싶은데 어떤 포맷이 좋나요?
투명 배경이 필요하면 PNG가 가장 좋아요. JPG는 투명 배경을 지원하지 않아서 흰 배경이 깔려요. 캔바(Canva)나 포토샵에서 배경 없이 내보내기 하면 돼요.
Q. 파비콘 만들 때 무료로 쓸 수 있는 도구가 있나요?
favicon.io나 realfavicongenerator.net 같은 사이트에서 텍스트나 이미지를 넣으면 각 사이즈별 파비콘을 자동으로 생성해 줘요. 캔바에서 48x48px 캔버스로 직접 디자인하는 것도 방법이에요.
본 포스팅은 개인 경험과 공개 자료를 바탕으로 작성되었으며, 전문적인 의료·법률·재무 조언을 대체하지 않습니다. 정확한 정보는 해당 분야 전문가 또는 공식 기관에 확인하시기 바랍니다.
👉 함께 읽으면 좋은 글: 블로그스팟 커스텀 도메인 연결하는 법
👉 함께 읽으면 좋은 글: 블로그스팟 SEO 기본 설정 처음부터 세팅하기
👉 함께 읽으면 좋은 글: 애드센스 승인 후 블로그스팟 광고 배치 전략
파비콘은 작은 아이콘이지만, 브랜딩과 검색결과 신뢰도에 생각보다 큰 영향을 주거든요. 48px 배수의 정사각형 PNG를 준비하고, 관리자에서 업로드한 뒤, 시크릿 모드로 확인하는 것까지가 한 세트예요.
파비콘 설정하면서 겪은 에피소드가 있으시면 댓글로 남겨 주세요. 공유해 주시면 같은 고민하는 분들에게 큰 도움이 됩니다.
댓글
댓글 쓰기