[네이버웹마스터 가이드] 파비콘(인터넷 아이콘) 적용하기
페이지 정보
본문
파비콘(Favicon)은 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘입니다.
아래 가이드라인을 준수 한다면 검색 결과에 파비콘이 표시될 수 있습니다.
STEP 1. 파비콘 사이즈, 파일 포맷 및 기본 수칙 확인
기본 수칙
- 검색 로봇이 파비콘을 수집할 수 있어야 합니다. robots.txt 설정하기 가이드 참고
- 파비콘 URL를 자주 변경하지 않습니다. (이미지 교체는 가능)
파비콘 URL과 이미지가 변경될 경우 업데이트 지연 및 검색 결과 내 파비콘 이미지가 일정하지 않을 수 있습니다. - 웹사이트를 표현할 수 있는 고유의 이미지를 사용합니다.
- 음란물이나 사용자로 하여금 혐오감을 느끼게 하는 이미지를 사용하지 않습니다.
파비콘 사이즈
- 너비와 높이가 동일한 정사각형이어야 합니다. (예: 30 x 30px, 48 x 48px)
- 네이버 검색 결과에는 파비콘의 사이즈를 15 x 15px 로 조정하여 사용합니다. 해당 해상도에서 파비콘이 잘 노출 될수 있는지 확인해보시길 권장합니다.
파비콘 파일 포맷
파비콘 파일 포맷 중 SVG를 제외 한 모든 포맷이 지원 됩니다.
| ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
|---|---|---|---|---|---|---|
| O | O | O | O | O | O | 단독 사용 지원불가 |
STEP 2. 파비콘 마크업
HTML 문서의 <head> 태그 내에 있는 <link> 태그를 활용합니다.
파비콘이 위치하는 href 에는 상대 경로가 아닌 절대 경로를 사용해야 합니다.
<head>
<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico">
</head>
rel 속성은 아래 중 하나를 사용하시면 됩니다.
* shortcut icon
* icon
* apple-touch-icon
* apple-touch-icon-precomposed
Q. 페이지 내에 여러개의 파비콘 마크업이 있는 경우 어떤 것을 우선시하나요?
웹 페이지 내에 파비콘 마크업이 여러 개가 존재한다면 검색 노출에 사용되는 파비콘은 아래 규칙을 기준으로 우선순위를 결정하여 처리합니다.
- 마크업에 기재된 rel 속성 및 사이트의 기본 파비콘 중 아래 순서를 기준으로 처리
- shortcut icon
- icon
- default icon (host url + /favicon.ico)
- apple-touch-icon
- apple-touch-icon-precomposed
- 동일한 rel 속성값이 여러 개가 존재하는 경우 파비콘 사이즈가 큰 것을 우선
출처 : 네이버 웹마스터 가이드
- 이전글[네이버웹마스터 가이드] 웹사이트 수집요청 및 사이트맵 제출 방법 21.06.21
- 다음글[네이버웹마스터 가이드] 모바일 기기 대응하기 21.06.11
댓글목록
등록된 댓글이 없습니다.