Copied to clipboard

Favicon 설정 및 안나올 때 해결 방법

Favicon 설정 및 안나올 때 해결 방법

블로그를 운영하거나 사이트를 운영하시는 분들은 자신만의 사이트의 아이콘을 가지고 계실 거라고 생각합니다. 하지만 모바일을 통해서 구글 검색 결과를 보면, 자신의 사이트에 대한 아이콘이 업데이트가 되지 않는 경우가 있습니다.

이 글에서는 적용한 favicon이 보이지 않거나, 업데이트가 되지 않는 경우에 대한 해결 방법을 소개해드리도록 하겠습니다.

파비콘

파비콘이란 사이트의 아이콘이라고 할 수 있는 중요한 이미지 파일입니다. 파비콘이 잘 적용되어 있으면 아무래도 다른 사람들에게 자신의 사이트를 더 잘 알려줄 수 있을 것입니다.

파비콘 예시

favicons

구글, 네이버, 카카오, 다음 등 가장 유명한 사이트들의 favicon들은 위처럼 아이콘을 제공하고 있습니다.

favicon 설정하는 방법

favicon을 설정하는 방법은 구글에서 아주 친절하게 설명해주고 있습니다. 문서에서 이야기하는 것을 간단하게 정리하면 다음과 같습니다.

  1. link 태그 삽입하기
  2. link 태그의 rel 속성 설정하기
  3. link 태그의 href 속성 설정하기

간단하게 말해서 다음과 같은 html 태그를 head안에 삽입하시면 됩니다.

<link rel="icon" type="image/x-icon" href="/path/to/favicon.ico"\>

rel 속성, 다음 문자열 중 하나를 사용

  • icon
  • shortcut icon
  • apple-touch-icon
  • apple-touch-icon-precomposed

파비콘 업데이트 하는 방법

위와 같이 적용을 했다고 해도 정상적으로 업데이트가 되지 않는 경우가 발생합니다. (참고로 업데이트 되는데는 1 ~ 3일 정도 소요)

만약 문서대로 적용했는데도 정상적으로 업데이트가 되지 않는다면, 다음과 같은 방법을 시도해보시면 도움이 될 수 있습니다.

favicon 위치 변경

만약, favicon이 사이트 최상위 바로 밑에 있지 않다면 다음과 같이 파비콘의 위치를 변경해야합니다.

/path/to/favicon.ico > /favicon.ico

쿼리 파라미터 사용하기

업데이트가 되지 않는 문제가 계속된다면 구글 검색이 캐시를 사용하기 때문이라고 합리적인 의심을 할 수가 있습니다. 따라서 아래와 같이 쿼리 파라미터를 사용하여 명시적으로 favicon 파일이 변경된 것처럼 적용해줍니다.

/favicon.ico > /favicon.ico?v=1.0

마무리

파비콘 및 파비콘이 업데이트되지 않는 경우에 대해서 알아보았습니다. 혹시 궁금하신 점이나 이상한 점이 있다면 댓글 부탁드리겠습니다.

감사합니다.

여러가지 다양한 IT 팁들과 리뷰에 관해 글을 쓰고 있습니다.

Comments