파비콘은 브라우저 탭과 북마크에서 웹사이트를 식별하는 작은 이미지입니다. 이름은 '즐겨찾는 아이콘'에서 따왔습니다. 탭이 너무 좁아 제목을 표시할 수 없는 경우에도 독자는 열려 있는 페이지 중에서 사이트를 찾을 수 있는 시각적인 방법을 제공합니다. 검색 엔진은 결과 옆에 사이트의 파비콘을 표시할 수도 있습니다. MDN의 파비콘 정의는 이러한 일반적인 브라우저 사용을 설명합니다.
SearchVector의 주황색으로 분할된 원이 하나의 예입���다. 표지 다이어그램은 실제 아이콘 자산을 사용하여 이미지 파일, 페이지 HTML 및 브라우저 간의 연결을 설명합니다. 검색결과 스크린샷이 아닌 티칭 다이어그램입니다.
구현할 준비가 되셨나요? HTML 설정 또는 아이콘 누락 문제 해결.
로 이동합니다.파비콘, 로고, 소셜 이미지 중 어느 것이?
��고는 기업의 더 넓은 시각적 아이덴티티입니다. 여기에는 기호, 전체 이름 및 태그라인이 포함될 수 있습니다. 파비콘은 해당 아이덴티티를 작은 응용 프로그램으로, 일반적으로 작은 크기에서도 알아볼 수 있는 단순화된 기호입니다. 워드마크 전체를 축소하면 문자를 구별할 수 없게 되는 경우가 많습니다.
| Asset | Main job |
|---|---|
| Favicon | 브라우저 탭에서 페이지를 식별하거나 북마크 |
| 헤더 로고 | 페이지 레이아웃 내에서 브랜드 식별 |
| 소셜 미리보기 image | 더 큰 이미지로 공유 링크를 설명합니다 |
| 홈 화면 아이콘 | 저장된 웹 사이트 또는 설치된 웹 앱을 나타냅니다. 디바이스 |
헤더 로고를 변경한다고 해서 반드시 파비콘이 업데이트되는 것은 아닙니다. 이는 서로 다른 설정으로 제어되는 별도의 파일일 수 있습니다. 마찬가지로 소셜 미리보기 이미지를 교체해도 누락된 탭 아이콘이 복구되지 않습니다. 잘못된 표면을 식별하는 것부터 시작한 다음 이를 제공하는 설정을 찾으세요.
작은 크기에서도 살아남는 아이콘을 선택하세요
사각 캔버스와 심플한 실루엣으로 시작해보세요. 큰 소스 이미지를 내보낸 다음 실용적인 디자인 확인을 위해 16×16 및 32×32로 미리 봅니다. 이러한 미리보기는 가독성을 테스트합니다. 모든 브라우저가 아이콘을 하나의 고정된 크기로 렌더링한다는 주장은 아닙니다. 사라지는 획, 복잡한 글자, 탭 배경과 합쳐지는 투명한 영역을 찾아보세요.
밝은 배경과 어두운 배경 모두에 대해 마크를 검토합니다. 얇고 어두운 윤곽선은 어두운 탭에서 사라질 수 있고, 연한 기호는 밝은 탭에서 사라질 수 있습니다. 고의적인 대비가 있는 단색 모양이 인식하기 더 쉬운 경우가 많습니다. 색상에만 의존하지 마십시오. 아이콘이 시각적으로 유사할 때 뚜렷한 윤곽선이 여전히 도움이 됩니다.
팀에서 편집할 수 있는 소스 파일을 보관하세요. 흐릿한 축소판의 더 큰 복사본을 내보내도 세부정보가 복원되지 않습니다. 리브랜딩의 경우 웹사이트, 북마크 및 저장된 바로가기가 관련성이 느껴지도록 메인 로고 옆에 있는 작은 아이콘을 승인하세요.
실제 HTML 예제로 파비콘 추가
SearchVector은 파비콘 이미지 URL에서 실제 512×512 PNG를 제공합니다. 이 최소 선언은 SearchVector 사이트:
의 기존 자산을 가리킵니다.문서의 안에 선언을 넣습니다. 루트 상대 경로는 현재 호스트 이름에서 확인됩니다. SearchVector에서는 SearchVector에서 /favicon.png을 요청합니다. 귀하의 도메인에서는 귀하의 도메인에서 해당 파일을 요청합니다. 자신의 사이트에 대해서는 자신의 브랜드 자산을 업로드하고 실제 경로를 사용하세요. 이미지를 업로드하지 않고 태그를 복사하면 깨진 참조가 남습니다.
rel 속성은 리소스를 아이콘으로 식별합니다. href는 이를 찾고, type은 해당 형식을 설명하며, sizes은 이미지 크기를 설명합니다. "512x512"를 쓰면 파일 크기가 조정되지 않습니다. 내보낸 이미지를 검사하고 선언을 정확하게 유지하세요.
SearchVector는 SVG 및 ICO 대안도 선언합니다. 브라우저는 MDN의 아이콘 링크 참조에 설명된 대로 유형 및 크기와 같은 속성을 사용하여 아이콘 선언 중에서 선택할 수 있습니다. 따라서 다중 선언이 자동으로 문제가 되는 것은 아니지만 오래된 대안으로 인해 일관성 없는 모양이 설명될 수 있습니다.
CMS를 사용한다면 사이트 아이콘 설정부터 시작하세요. 프레임워크를 사용하는 경우 확립된 메타데이터 메커니즘을 사용하십시오. 그런 다음 결과 HTML을 검사합니다. 관리 화면에서 성공적인 업로드는 작업의 한 부분일 뿐입니다. 기존 템플릿이 이미 출력하는 내용을 확인하기 전에 두 번째 경쟁 설정을 추가하지 마세요.
Google 검색 노출에 필요한 것
Google의 favicon 문서에는 최소 8×8 픽셀의 정사각형 이미지가 필요하며 48×48보다 큰 크기를 권장합니다. 나열된 형식에는 PNG 및 ICO가 포함됩니다. 브라우저에서 작동하는 SVG가 Google의 검색 프리젠테이션에서 지원을 설정한다고 가정하지 마세요.
홈페이지에서 아이콘을 선언해야 합니다. Googlebot은 해당 홈페이지에 접근해야 하고, Googlebot-Image는 아이콘 파일에 접근해야 합니다. 아이콘 URL을 안정적으로 유지하고 사이트를 대표하는 마크를 사용하세요. Google는 호스트 이름당 하나의 파비콘을 지원합니다. 하위 도메인은 자체 도메인을 가질 수 있지만 하위 디렉터리는 별도의 검색 파비콘을 얻지 못합니다.
적격 여부는 표시를 보장하지 않습니다. 변경 후 Google는 홈페이지를 다시 크롤링하고 처리해야 합니다. 문서에 따르면 며칠에서 몇 주가 걸릴 수 있습니다. 사이트 소유자는 URL 검사를 통해 홈페이지 색인 생성을 요청할 수 있습니다. 반복적으로 이미지 이름을 바꾸는 것은 액세스를 확인하고 처리 시간을 허용하는 데 유용한 대체 방법이 아닙니다.
누락되거나 오래된 파비콘 문제 해결
HTML이 선언하는 것, 이미지 URL이 반환하는 것, 브라우저가 표시하는 것 등 세 가지 관찰을 분리합니다. �� 사이의 불일치를 통해 조사할 위치를 알 수 있습니다. 여러 설정을 한꺼번에 변경하기보다는 페이지 URL, 아이콘 URL, 결과를 짧게 기록해 두세요.
| Symptom | Next check |
|---|---|
| 어떤 페이지에도 아이콘이 없습니다 | 헤드에서 아이콘 선언을 검사하세요. 이미지 URL을 직접 엽니다 |
| 홈페이지는 작동하지만 기사는 작동하지 않음 | 템플릿 및 루트 기준과 페이��� 기준 비교 경로 |
| 한 브라우저의 오래된 아이콘 | 새로운 브라우저 프로필을 비교하고 선언된 모든 대안을 검사합니다 |
| 이미지 URL은 다음을 엽니다. 웹페이지 | 리디렉션, 액세스 문제 또는 대체 HTML 응답 확인 |
| 브라우저가 작동하지만 검색은 작동하지 않음 | 홈페이지 선언, 크롤링 액세스 및 검색 자격을 별도로 검토합니다 |
서버가 로그인 페이지나 일반 HTML 대체를 보내는 경우 200으로 표시된 응답은 충분하지 않습니다. 브라우저의 네트워크 패널에서 아이콘 요청의 최종 URL, 응답 콘텐츠 유형 및 미리보기를 검사합니다. PNG는 실제로 PNG로 디코딩되어야 합니다. 또한 원본이 업데이트된 후에도 CDN이 여전히 이전 파일을 제공하고 있는지 확인하세요.
캐시 조사를 위해서는 이미지를 직접 열고 새로운 브라우저 프로필과 비교해 보세요. 캐시를 지우면 원인을 파악하는 데 도움이 될 수 있지만 웹사이트가 작동하기 위해 사용자가 특별한 재설정을 수행할 필요는 없습니다. 로컬 새로 고침을 영구 수정으로 처리하기 전에 배포된 자산 및 캐시 구성을 확인하세요.
작업된 예: 중첩된 페이지는 아이콘을 잃습니다
홈페이지에 올바른 아이콘이 표시되는 가상의 사이트를 생각해 보세요. 반면 /blog/ 아래의 기사는 그렇지 않��니다. 두 템플릿 모두 선행 슬래시 없이 href="favicon.png"를 포함합니다. 기본 URL 재정의가 없다고 가정하면 해당 상대 경로는 현재 페이지 옆에서 확인됩니다. 기사의 다른 위치를 요청하는 동안 루트에서 작동할 수도 있습니다.
개발자가 기사의 아이콘 요청을 열고 이미지 대신 사이트의 HTML 대체를 반환하는 것을 발견했습니다. 해결 방법은 이미지가 사이트 루트에 존재하는지 확인하고 공유 선언을 href="/favicon.png"로 변경하는 것입니다. 그런 다음 홈페이지와 기사를 다시 확인합니다. 이제 둘 다 동일한 자산을 요청합니다.
이것은 보고된 SearchVector 사건이 아닌 실제 진단 사례입니다. 그 교훈은 아트웍을 교체하기 전에 요청된 URL을 검사하는 것입니다. 중첩된 템플릿이 잘못된 파일을 요청하는 경우 완벽하게 유효한 이미지는 도움이 될 수 없습니다.
작업 종료 전 최종 확인
- 홈페이지와 하나의 중첩 페이지를 엽니다. 둘 다 의도한 아이콘 선언을 확인하세요.
- 선언된 각 대안을 열고 그것이 현재 브랜드에 속하는지 확인하세요.
- 인증이나 HTML 폴백 없이 의도한 이미지가 로드되는지 확인하세요.
- 밝은 브라우저와 어두운 브라우저에서 작은 아이콘을 검사하세요 외관.
- Google 자격을 별도로 검토한 다음 변경 사항을 기록하고 처리 시간을 허용합니다.
더 폭넓은 웹사이트 검토를 위해서는 SearchVector의 Website Checker 또는 Web Page Crawler를 사용하세요. 위의 직접 이미지와 HTML 확인을 파비콘 증거로 보관하세요. 일반적인 페이지 리뷰는 검색 엔진이 귀하의 브랜드를 어떻게 표시할지 보장하지 않습니다.
완성된 파비콘 작업에는 인식 가능한 이미지, 올바른 선언 및 페이지 템플릿 전체에서 작동하는 리소스 URL이 있습니다. 먼저 콘크리트 조각을 확인하세요. 그런 다음 지연된 새로 고침과 손상된 브라우저 구현을 혼동하지 않고 검색 모양을 모니터링하세요.
