실무에 바로 적용할 수 있는 웹 제작 꿀팁 및 유용한 자료실 공간입니다.
나눔웹이 제공하는 핵심 노하우와 마케팅 인사이트를 자유롭게 활용해 보십시오.

나눔웹 마케팅 꿀팁

검색 결과에 파비콘이 안 나올 때, favicon 크기와 link 태그 점검 순서

구글이나 네이버 검색 결과에서 우리 사이트만 지구본 모양 기본 아이콘으로 나온다면, 파비콘 파일 크기와 홈페이지의 link 태그부터 확인해 보시는 게 좋습니다.
검색엔진은 브라우저 탭과 달리 정해진 조건을 만족하는 아이콘만 가져가기 때문에, 탭에서는 잘 보여도 검색 결과에는 빠지는 경우가 꽤 많습니다.

💡 작은 아이콘 하나가 왜 중요할까요?

모바일 검색 결과에서는 사이트 이름 옆에 파비콘이 함께 표시됩니다. 경쟁 업체는 로고가 보이는데 우리만 기본 아이콘이면 같은 순위라도 눈에 덜 띄고, 신뢰감에서도 손해를 봅니다. 리뉴얼 후 아이콘 경로가 바뀌면서 조용히 사라지는 경우도 자주 봤습니다.

1. 크기는 48px의 배수, 정사각형으로

구글 검색 센터 가이드는 파비콘을 48px의 배수인 정사각형(48×48, 96×96, 144×144 등)으로 준비하라고 안내합니다. SVG는 크기 제한이 없어 함께 넣어 두면 좋습니다. 예전 관행대로 16×16 ICO 하나만 두면 탭에서는 보여도 검색 결과용으로는 부족할 수 있습니다.

용도권장 파일메모
검색 결과·브라우저 탭favicon.ico 또는 PNG 48×48 이상48px 배수 정사각형
고해상도 화면favicon.svg크기 제한 없음
아이폰 홈 화면 추가apple-touch-icon.png 180×180투명 배경 피하기

2. link 태그는 홈페이지에 있어야 합니다

검색엔진은 하위 페이지가 아니라 홈페이지(도메인 루트)의 <head>에서 아이콘을 찾습니다. 게시판 레이아웃에만 태그를 넣었거나, 메인만 별도 레이아웃을 쓰면서 태그가 빠진 경우가 실제로 흔합니다. 파비콘은 호스트 이름(도메인)마다 하나라서, www 유무가 다르면 각각 확인해야 합니다.

<!-- 홈페이지 <head> 안에 넣는 기본 세트 -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg"
      type="image/svg+xml">
<link rel="apple-touch-icon"
      href="/apple-touch-icon.png">

3. 아이콘 경로가 막혀 있지 않은지 확인

robots.txt에서 업로드 폴더 전체를 막아 두면 아이콘 파일도 함께 차단됩니다. 또 아이콘 주소가 로그인 페이지로 리다이렉트되거나 404가 나지 않는지 브라우저 주소창에 직접 입력해 보시면 바로 알 수 있습니다.

# robots.txt 에서 아이콘 경로를 막지 않았는지 확인
User-agent: *
Disallow: /files/

# 아이콘을 /files/ 아래에 두었다면 예외 처리
Allow: /files/favicon/

모든 조건을 맞춰도 검색 결과에 반영되기까지는 며칠에서 몇 주가 걸립니다. 구글 서치 콘솔에서 홈페이지 URL 검사 후 색인 생성을 요청하면 조금 앞당길 수 있습니다.

"검색 결과 첫 줄의 작은 아이콘도 브랜드의 얼굴입니다."

나눔웹은 리뉴얼 오픈 전 점검 목록에 파비콘과 홈 화면 아이콘을 넣어,
도메인과 레이아웃이 바뀌어도 아이콘이 빠지지 않도록 확인합니다.


List of Articles
번호 분류 제목 글쓴이
41 웹 성능 홈페이지 로딩 속도를 3배 높이는 '이미지 최적화' 실무 가이드 나눔웹
40 퍼블리싱 CSS 변수로 유지보수와 테마 기능을 한 번에! (CSS Custom Properties) 나눔웹
39 마케팅 카카오톡 링크 썸네일의 비밀! 클릭률을 높이는 '오픈 그래프(OG)' 세팅법 나눔웹
38 모바일 모바일 꽉 찬 화면 하단 짤림 현상! '100vh'의 함정과 완벽 해결법 나눔웹
37 웹 성능 홈페이지 첫 화면 글자 깜빡임(투명 현상) 1초 만에 해결하는 법 나눔웹
36 퍼블리싱 스마트폰에서 로고가 흐리게 보인다고요? 'SVG' 포맷이 정답입니다. 나눔웹
35 웹 성능 클릭 실수 유발하는 '화면 덜컹거림(CLS)', 단 한 줄로 해결하는 법 나눔웹
34 모바일 고객의 이탈을 막는 1초 디테일, '모바일 맞춤형 키보드' 세팅법 나눔웹
33 UI/UX 모바일에서 버튼 누를 때 생기는 촌스러운 '회색 박스' 없애는 법 나눔웹
32 UI/UX 레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS 나눔웹
31 UI/UX 상단 메뉴에 제목이 가려진다고요? '부드러운 스크롤' 마법의 2줄 나눔웹
30 모바일 아이폰에서 입력창 누를 때 화면 '자동 확대'되는 현상 막는 법 나눔웹
29 퍼블리싱 지저분한 모바일 스크롤바, 기능은 남기고 쏙 숨기는 마법의 CSS 나눔웹
28 모바일 모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기 나눔웹
27 UI/UX 애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법 나눔웹
26 퍼블리싱 무거운 플러그인 NO! 넷플릭스처럼 쫀득한 '가로 스와이프' CSS로 뚝딱 만들기 나눔웹
25 UI/UX 1%의 디테일이 브랜딩을 완성합니다! '텍스트 드래그 색상' 바꾸기 나눔웹
24 UI/UX 투박한 파란색 체크박스는 그만! 단 1줄로 우리 회사 컬러 입히기 나눔웹
23 모바일 하단 고정 버튼이 아이폰 '검은 줄'에 겹친다면? (Safe Area 대응법) 나눔웹
22 모바일 앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법 (Overscroll) 나눔웹
Board Pagination Prev 1 2 3 Next
/ 3
rhwlsghkcocndgus XE2.1.39 STAGE1.5.4