※ favicon 설정 후, 구글 검색 색인 Google Search Console
♣ 48x48 픽셀의 favicon.ico를 서비스하는 호스트의 DocumentRoot에 생성 하는 것이 일반적 임.
- 96x96px, 144x144px, 192x192px 등 48의 배수 (구글의 경우, 이 규칙은 필수)
♣ 웹페이지의 <head> 태그 안에 파비콘을 지정하는 링크를 추가
<link rel="icon" href="favicon.ico" type="image/x-icon">
♣ 벡터 그래픽(SVG)이나 PNG도 사용 가능
<link rel="icon" href="favicon.svg" type="image/svg+xml"> <link rel="icon" href="favicon.png" type="image/png">
♣ 크라이언트의 브라우저나 플랫폼에서 웹사이트의 파비콘이 최적화되어 표시되게 하려면 (예시)
<link rel="icon" href="/img/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" href="/img/favicon/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/img/favicon/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/img/favicon/favicon-192x192.png" sizes="192x192" type="image/png">
<link rel="icon" href="/img/favicon/favicon-512x512.png" sizes="512x512" type="image/png">
<link rel="icon" href="/img/favicon/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png">
<link rel="manifest" href="/img/favicon/site.webmanifest">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/img/favicon/mstile-150x150.png">
★ DocumentRoot의 하위 폴더(/img/favicon)에 다양한 favicon을 만들어 사용할 것을 추전.
♣ 향후 추세를 볼때, 벡터 그래픽(SVG)을 추천 하며, 아래는 보펀적인 설정.
<link rel="icon" href="/img/favicon/favicon.svg" type="image/svg+xml"> <!-- SVG 우선 적용 -->
<link rel="icon" href="/img/favicon/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/img/favicon/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/img/favicon/favicon-48x48.png" sizes="48x48" type="image/png">
<link rel="icon" href="/img/favicon/favicon-192x192.png" sizes="192x192" type="image/png">
<link rel="icon" href="/img/favicon/favicon-512x512.png" sizes="512x512" type="image/png">
<link rel="icon" href="/img/favicon/favicon.ico" sizes="any" type="image/x-icon">
★ 벡터 그래픽(SVG)은 512x512 해상도를 추천 함 ~
♣ 필자의 개인 웹페이지에 실사용 중인 favicon 설정. (여러 브라우저나 플랫폼에 맞춤)
<link rel="icon" type="image/svg+xml" href="<?php echo GP_FAV_URL ?>/glitter_circle-512.svg" />
<link rel="icon" type="image/png" sizes="512x512" href="<?php echo GP_FAV_URL ?>/favicon-512.png" />
<link rel="icon" type="image/png" sizes="300x300" href="<?php echo GP_FAV_URL ?>/favicon-300.png" />
<link rel="icon" type="image/png" sizes="192x192" href="<?php echo GP_FAV_URL ?>/favicon-192.png" />
<link rel="icon" type="image/png" sizes="180x180" href="<?php echo GP_FAV_URL ?>/favicon-180.png" />
<link rel="icon" type="image/png" sizes="144x144" href="<?php echo GP_FAV_URL ?>/favicon-144.png" />
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo GP_FAV_URL ?>/favicon-96.png" />
<link rel="icon" type="image/png" sizes="48x48" href="<?php echo GP_FAV_URL ?>/favicon-48.png" />
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo GP_FAV_URL ?>/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo GP_FAV_URL ?>/favicon-16.png" />
<link rel="apple-touch-icon" sizes="58x58" href="<?php echo GP_FAV_URL ?>/favicon-58.png" />
<link rel="apple-touch-icon" sizes="60x60" href="<?php echo GP_FAV_URL ?>/favicon-60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo GP_FAV_URL ?>/favicon-72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="<?php echo GP_FAV_URL ?>/favicon-76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="<?php echo GP_FAV_URL ?>/favicon-120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo GP_FAV_URL ?>/favicon-144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="<?php echo GP_FAV_URL ?>/favicon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo GP_FAV_URL ?>/favicon-180.png" />
<link rel="mask-icon" type="image/svg+xml" href="<?php echo GP_FAV_URL ?>/glitter_circle-512.svg" />
<link rel="icon" type="image/x-icon" sizes="any" href="<?php echo GP_FAV_URL ?>/favicon-any.ico" />
★ favicon-any.ico는 16x16, 32x32, 48x48, 256x256, 215x512 ; 5개 이미지를 포함하는 멀티 해상도 이미지
♥ favicon 등록 후, 구글 색인 등록 확인 (SEO에 적합한 변경이 발생한 경우면, 자동 재크롤링 됨)
- 사이트의 초기 색인에서 완벽한 SEO를 유지하는 것이 중요.
♥ 수동 색인 생성 요청 하기 ;
- robots.txt의 설정 확인 ( '/ '크롤링 개방. favicon의 'User-agent'는 'Googlebot-Image' )
- 48x48 픽셀의 favicon.ico를 DocumentRoot에 생성.
- '구글서치콘솔(Google Search Console) login
- 도메인 속성 추가 (기존 사용 중이면, 속성 선택)
- URL 검사
- 실제 URL 테스트
- 색인 생성 요청 > 몇 시간 지나면 색인 될 수 있으나, 7일 정도 소요 됨.
- 브라우저 캐시를 지우고, 검색하면 도메인 앞에 favicon이 색인 되였을 것임.
■ SEO와 구조를 최적화혀 크롤러가 재크롤링하게 하는 것이 최상의 방법임.
- 48x48px 규칙(배수)은 꼭 지켜야 함 (구글의 경우)
- 크롤러, 'Googlebot-Image'의 크롤링이 되여질 때까지 favicon의 URL이 안정된 상태를 유지하여야 함
> '색인이 안되었다' 하여, 자꾸 수정하지 말 것.
> 'Googlebot-Image' 크롤러는 택스트-크롤러에 비해, 방문 빈도가 적음.
♠ 위와 같은 설정을 하였는데도, 색인이 안되였다면; 크롤러가 "품질, 메타데이터, 저작권" 등에서 상태 불량 처리한 것 임.
- 저작권 문제가 있는 이미지의 경우
- 원본 이미지의 출처가 우선하지 않은 경우
- 품질 및 메타데이터 불량인 경우
> favicon은 고유하고 적법하며, 품질과 메타데이터가 적절한 이미지이여야 함.
댓글목록
등록된 댓글이 없습니다.