파비콘에는 어떤 파일이 필요합니까?

이를 지원하는 브라우저용 SVG와 지원하지 않는 장치용 약 180픽셀의 PNG입니다. 그 쌍은 현재의 모든 것을 다룹니다.

favicon.ico가 여전히 필요합니까?

아주 오래된 브라우저에만 해당됩니다. 또한 마크업 없이 사이트 루트에서 자동으로 가져오므로 로그에 404가 표시되는 것을 방지할 수 있습니다.

파비콘을 HTML에 삽입할 수 있나요?

예, 데이터 URI입니다. 별도의 파일을 제공하지 않고 하나의 독립된 페이지를 가질 수 있는 유일한 방법입니다.

내 파비콘이 업데이트되지 않는 이유는 무엇입니까?

파비콘은 공격적으로 캐시되며 때로는 일반적인 재로드를 넘어서는 경우도 있습니다. 파일 이름을 변경하거나 쿼리 문자열을 추가하여 강제로 다시 가져오세요.

HTML의 파비콘: 탭 아이콘과 필요한 최소값

HTML의 파비콘은 브라우저가 페이지 제목 옆에 표시하는 아이콘입니다. 페이지가 저장될 때 탭, 북마크, 기록 및 휴대전화의 홈 화면에 표시됩니다.

마크업. 강조 표시된 줄이 이 용어에 관한 부분입니다.

탭이 없는 페이지는 20개의 탭이 한 줄로 늘어선 빈 사각형이며, 페이지가 완료되지 않았음을 나타내는 첫 번째 표시입니다.

최소값은 헤드에 하나의 <link rel="icon">입니다. 별도의 파일 없이 이를 수행하는 현대적인 방법은 모든 크기에서 선명하고 페이지와 함께 이동하는 SVG 데이터 URI입니다.

이 가이드에서는 최소값, 모든 것을 포함하는 두 개의 태그 및 다크 모드를 따르는 파비콘을 다룹니다.

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon-180.png">

두 줄. 이것이 바로 현대적인 요구 사항입니다.

파비콘 태그가 두 개인 이유

SVG는 브라우저가 요구하는 모든 크기로 확장되며 다크 모드에 적응할 수 있습니다. 모든 컨텍스트에 대해 하나의 파일.

파비콘은 탭, 북마크, 방문 기록 목록에 있는 작은 아이콘입니다. SVG 데이터 URI가 있는 헤드의 하나의 링크 태그는 모든 크기에서 선명하고 별도의 파일이 필요하지 않은 아이콘을 페이지에 제공합니다.

180px PNG는 특히 페이지가 휴대폰 홈 화면에 저장되는 경우 SVG 아이콘을 허용하지 않는 장치에 적용됩니다.

이전 지침에는 8개 또는 10개의 크기가 나열되어 있습니다. 그것은 더 이상 사용되지 않는 브라우저를 위한 것이었고 동일한 마크의 파일 10개를 유지하는 것은 반환할 수 없는 작업입니다.

헤드 내부의 아이콘은 페이지와 함께 이동합니다. 파일 옆에 있는 favicon.ico는 그렇지 않습니다.

다크 모드를 따르는 파비콘

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #202600 }
    @media (prefers-color-scheme: dark) { .mark { fill: #d5f525 } }
  </style>
  <rect width="32" height="32" rx="7" fill="#d5f525"/>
  <path class="mark" d="M13 9 L7 16 L13 23"/>
</svg>

SVG 파일 내부의 미디어 쿼리입니다. 그런 다음 아이콘은 밝은 탭 표시줄과 어두운 탭 표시줄 모두에서 작동합니다. 이는 PNG가 할 수 없는 기능이며 SVG를 선호하는 진정한 이유입니다.

단일 파일 페이지에 포함

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23d5f525'/%3E%3C/svg%3E">

SVG는 텍스트이고 base64로 인코딩하면 아무 이유 없이 크기가 1/3씩 늘어나기 때문에 base64가 아닌 URL로 인코딩됩니다. 색상의 #에 대한 %23를 참고하세요. 이스케이프되지 않으면 URI가 종료되고 아이콘이 자동으로 사라집니다. 데이터 URI를 참조하세요.

자체 포함된 페이지의 경우 이는 별도의 파일을 제공하지 않고 아이콘을 가질 수 있는 유일한 방법입니다.

캐싱 문제

파비콘은 다른 어떤 것보다 더 공격적으로 캐시되며 때로는 강제로 다시 로드해도 살아남습니다. 하나를 교체했는데 이전 것이 지속되는 경우:

<link rel="icon" href="/icon.svg?v=2" type="image/svg+xml">

버전 쿼리로 인해 강제로 다시 가져옵니다. 캐시 무효화를 참조하세요.

자동 루트 요청

브라우저는 참조 여부에 관계없이 사이트 루트에서 /favicon.ico를 요청합니다. 아무 것도 없으면 대부분의 페이지 로드 시 로그에 404가 표시됩니다. 무해하고 시끄럽기 때문에 작은 .ico를 거기에 넣어서 침묵시킬 가치가 있습니다.

16px에서 작동하는 디자인

아이콘은 일반적으로 약 16픽셀로 그려집니다. 이는 심각한 제약이며 대부분의 로고는 이를 견디지 못합니다.

16px에서 작동	그렇지 않다
하나의 문자 또는 하나의 간단한 표시	워드마크
대비가 강한 두 가지 색상	그라데이션
두꺼운 스트로크	미세한 디테일이나 가는 선
채워진 배경 모양	가벼운 스트로크로 투명함

마지막 행은 사람들이 잘못 알고 있는 부분입니다. 투명한 배경의 옅은 표시가 밝은 탭 표시줄에서 사라집니다. 전체 사각형을 색상으로 채우고 표시를 잘라내면 아이콘이 어떤 배경에서도 표시됩니다.

가장 많은 비용이 드는 세 가지 파비콘 실수

루트에 있는 favicon.ico에 의존합니다. 브라우저는 기본적으로 그곳을 보지만, 파일로 전송된 단일 페이지나 사이트 루트가 아닌 주소의 페이지는 살펴볼 루트가 없습니다. 헤드에 있는 링크 태그가 이동하는 태그입니다.

상세한 로고. 16픽셀의 워드마크는 얼룩입니다. 하나의 글자나 하나의 도형을 하나의 색상으로 사용하고, 탭 크기로 확인하세요.

페이지 제목을 잊어버렸습니다. 아이콘은 제목 옆에 있습니다. 좋은 아이콘이 있는 "문서"라는 페이지는 여전히 20개의 탭에서 누구도 찾을 수 없는 페이지입니다.

홈 화면 케이스

페이지가 휴대폰의 홈 화면에 저장되면 휴대폰은 <link rel="apple-touch-icon">에 더 큰 아이콘(180픽셀)을 원하며 그렇지 않으면 페이지의 스크린샷을 찍습니다.

매주 사람들이 여는 대시보드나 보고서의 경우 적절한 아이콘이 저장된 페이지를 북마크가 아닌 앱처럼 보이게 만듭니다.

Android는 대체 태그와 동일한 태그를 읽고 단일 페이지에 필요한 것보다 많은 웹 앱 매니페스트를 선호합니다.

페이지에 파비콘 제공: 4단계

SVG 데이터 URI가 포함된 <link rel="icon"> 하나를 추가합니다. 속성에 대해 이스케이프된 viewBox가 포함된 SVG입니다. 모든 크기에서 선명하고 파일이 없습니다.
이전 브라우저가 중요한 경우 PNG 대체를 추가하세요. 두 번째 링크 태그의 주소에 32px PNG가 있습니다.
휴대폰용 apple-touch-icon를 추가하세요. 180px PNG이므로 홈 화면에 저장할 때 페이지에 적절한 아이콘이 표시됩니다.
페이지에 어울리는 제목을 지정하세요. 아이콘과 <title>는 탭에서 독자에게 표시됩니다. 페이지에는 둘 다 필요합니다.

HTML의 파비콘: 탭 아이콘 및 필요한 최소값