브라우저 탭·검색결과에 내 사이트 아이콘이 안 나와요 — 파비콘
브라우저 탭과 즐겨찾기, 검색결과 옆에 뜨는 작은 아이콘(파비콘)이 안 나오거나 기본 아이콘으로 표시되는 이유와, 여러 기기·플랫폼에서 제대로 보이도록 파비콘을 만들고 등록하는 법을 정리했습니다.
내 얘기: 남의 사이트 탭엔 아이콘이 있는데 내 것만 밋밋하다
브라우저에 여러 탭을 띄워 두면 각 사이트의 작은 아이콘 덕분에 어느 탭이 어디인지 한눈에 구분됩니다. 그런데 내 사이트만 아무 특징 없는 기본 문서 아이콘으로 뜹니다. 즐겨찾기에 추가해도, 구글 검색결과의 사이트 이름 옆에도 아이콘이 없습니다.
이 작은 아이콘을 파비콘(favicon, favorite icon)이라고 합니다. 브랜드를 각인시키고 신뢰감을 주는 요소인데, 없으면 어딘가 미완성처럼 보입니다. 파비콘이 안 나오는 건 대개 "파일이 없거나", "형식·크기가 맞지 않거나", "등록을 안 했기" 때문입니다.
왜 파비콘 하나에 여러 파일이 필요할까
예전에는 favicon.ico 파일 하나면 됐지만, 지금은 파비콘이 쓰이는 곳이 많아졌습니다. 브라우저 탭(작게), 즐겨찾기, 스마트폰 홈 화면에 바로가기로 추가할 때(크게), 다크모드 등 상황마다 요구하는 크기와 형식이 다릅니다. 그래서 여러 크기의 이미지를 준비하는 것이 안전합니다.
특히 아이폰은 홈 화면 바로가기에 apple-touch-icon(180×180)을 따로 씁니다. 이게 없으면 아이폰에서 사이트를 홈에 추가했을 때 화면을 축소한 이상한 이미지가 들어갑니다. 안드로이드·PWA는 192×512 아이콘을 참고합니다.
| 용도 | 권장 크기·형식 | 비고 |
|---|---|---|
| 브라우저 탭·기본 | favicon.ico(16·32·48 포함) | 가장 기본 |
| 최신 브라우저 | PNG/SVG 32~48 | SVG면 선명·다크모드 대응 |
| 아이폰 홈 추가 | apple-touch-icon 180×180 | 없으면 축소된 화면이 들어감 |
| 안드로이드·PWA | 192×192, 512×512 | manifest에서 참조 |
만들고 등록하는 법
로고나 상징이 될 이미지 한 장을 준비해, 위 여러 크기로 뽑은 뒤 HTML <head>에 등록하면 됩니다. 이미지를 넣으면 favicon.ico와 각 크기의 PNG, apple-touch-icon, 그리고 <head>에 넣을 링크 코드까지 한 번에 만들어 주는 도구를 쓰면 편합니다.
작은 아이콘은 복잡한 이미지가 뭉개지므로, 글자 한두 자나 단순한 심볼로 만드는 것이 또렷합니다. 배경이 투명한 PNG나 SVG를 쓰면 다양한 탭 배경에서 자연스럽습니다.
그래도 안 보일 때
등록했는데도 안 보이면 대개 캐시나 경로 문제입니다.
- 브라우저가 옛 파비콘을 캐시함 → 강력 새로고침하거나 시크릿 창에서 확인
- 파일 경로가 틀림 → <link href>의 주소가 실제 파일 위치와 맞는지 확인
- favicon.ico가 사이트 최상위(루트)에 없음 → 루트에도 하나 두기
- HTML에 링크 태그를 안 넣음 → <head>에 각 아이콘 link 추가
자주 묻는 질문
favicon.ico 하나만 있으면 안 되나요?
기본 표시는 됩니다. 하지만 아이폰 홈 화면 추가(apple-touch-icon)나 안드로이드·PWA, 다크모드 등에서는 별도 크기·형식이 필요해 아이콘이 어색하게 나올 수 있습니다. 여러 크기를 함께 준비하는 것이 안전합니다.
검색결과에 파비콘이 왜 안 나오나요?
구글은 홈페이지에서 파비콘을 찾고, 재크롤링 시점에 반영하므로 등록 직후엔 안 보일 수 있습니다. 48×48의 배수 크기를 포함하고, 홈페이지 <head>에 링크가 올바로 있는지 확인한 뒤 며칠 기다려 보세요.
파비콘 이미지는 어떻게 디자인해야 하나요?
아주 작게 표시되므로 단순해야 합니다. 로고 전체보다 상징이 되는 글자 한두 자나 단순한 심볼이 또렷합니다. 배경이 투명한 PNG·SVG를 쓰면 어떤 탭 배경에서도 자연스럽습니다.