웹사이트를 만들고 나면 사소하지만 은근 신경 쓰이는 요소가 있다. 바로 검색 결과에 나오는 파비콘이다.
처음엔 잘 나오던 아이콘이 어느 날 갑자기 사라져버리면 괜히 사이트가 덜 완성된 느낌이 들고, 뭔가 잘못됐나 싶어 뒤숭숭해진다. robots.txt도 수정해보고, 캐시도 지워보고, 구글 서치콘솔도 건드려봤지만… 별 소용 없던 경험. 반응이 즉각 나타나는 것도 아니라서 답답한 이슈다.
처음엔 구글 검색에서 파비콘이 안 나오는 게 robots.txt 때문이라고 생각했다. 그래서 해당 아이콘 파일 경로에 대한 접근을 허용해두고, 크롤링 제한도 풀어봤다. 하지만 며칠이 지나도 여전히 검색 결과에는 회색 지구 아이콘만 덩그러니 떠 있었다. robots를 고친다고 바로 해결되는 문제는 아니었다.
결국 문제를 해결한 방법은 HTML 태그와 png 파일을 추가한 것이다.
<link rel="shortcut icon" href="{% static 'ico/favicon.ico' %}">
<link rel="icon" sizes="16x16" href="{% static 'ico/favicon-16x16.png' %}" />
<link rel="icon" sizes="32x32" href="{% static 'ico/favicon-32x32.png' %}" />
<link rel="icon" sizes="96x96" href="{% static 'ico/favicon-96x96.png' %}" />
기존에는 .ico
파일만 추가했었다. 그러나 위 코드를 명시적으로 넣고, 기존의 .ico 파일 외에도 .png
포맷도 추가하니까 구글 검색에 파비콘이 다시 나타났다. 의외로 rel 속성과 확장자 조합이 중요한 듯했고, 브라우저에서는 이미 잘 보이던 아이콘이라 더 헷갈렸던 부분이었다.
브라우저에서 잘 보인다고 검색 결과에서도 잘 나올 거란 보장은 없다. 구글은 크롤링 시점, 파일 포맷, 접근 허용 여부, 그리고 명확한 태그 명시까지 모두 체크하는 듯했다. 눈에 보이는 게 전부가 아니라는 걸 또 한 번 느낀 경험이었다.
구글 검색에서 파비콘이 사라졌다면 robots.txt 수정만으로는 부족할 수 있다. rel="icon"을 명확히 넣고, .png 포맷의 아이콘을 사용하는 게 핵심이다.
단순한 문제 같지만 은근히 놓치기 쉬운 부분이라, 한 번쯤 확인해보는 걸 추천한다.
@nullvuild