favicon.ico에 대한 링크 태그를 추가해야합니까?

favicon.ico를 자동으로 감지하지 않는 최신 브라우저가 있습니까? favicon.ico에 대한 링크 태그를 추가해야하는 이유가 있습니까?

<link rel="shortcut icon" href="/favicon.ico">

내 생각에 GIF 또는 PNG로 이동하기로 결정한 경우 HTML 문서에 포함하면됩니다 ...

즐겨 찾기
아이콘에 대해 다른 위치 또는 파일 유형 (예 : PNG 또는 SVG ) 을 선택하려면 : 한 가지 이유는 이미지 폴더 등의 특정 위치에 아이콘을 원하기 때문일 수 있습니다. 예를 들면 다음과 같습니다.

<link rel="icon" href="_/img/favicon.png">

이 다른 위치는 SO와 관련이있는 것처럼 CDN 일 수도 있습니다 <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

PNG와 같은 다른 파일 형식을 사용하는 방법에 대한 자세한 내용은 이 질문을 확인하십시오 .

들어 캐시 무효화 목적 :
캐시 무효화 목적의 경로를 쿼리 문자열을 추가합니다 :

<link rel="icon" href="/favicon.ico?v=1.1"> 

Favicons는 매우 많이 캐시되며 새로 고침을 보장하는 좋은 방법입니다.

기본 위치에 대한 각주 :
질문의 첫 번째 부분까지 : 모든 최신 브라우저는 기본 위치에서 즐겨 찾기 아이콘을 감지하므로 이를 사용할 이유가 아닙니다link .

각주 rel="icon": @ Semanino 's answer 에서
알 수 있듯이 사용 은 이전 버전의 Internet Explorer에서 필요했던 오래된 기술이지만 대부분의 경우 더 정확한 지침 으로 대체 할 수 있습니다 . @Semanino 기사 는이 값이 올바른 옵션이 아니라는 것을 나타내는 적절한 스펙 에 올바르게 링크되어 있습니다.rel="shortcut icon"rel="icon"relshortcut

제발 참고 그 W3C의 HTML5 사양 모두와 WHATWG 표준화

<link rel="icon" href="/favicon.ico">

"rel"속성의 값을 주목하십시오!

값 shortcut icon에 대한 rel속성은 아주 오래된 인터넷 익스플로러 특정 확장하고있다 되지 않습니다 .

따라서 더 이상 사용하지 않고 파일을 업데이트하여 표준을 준수하고 모든 브라우저에서 올바르게 표시되도록하십시오.

또한이 위대한 게시물을 살펴 할 수 있습니다 : REL = "바로 가기 아이콘을"유해한 것으로 간주

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

사용하려는 이미지 형식에 따라 다릅니다.
웹 사이트의 아이콘이 있으면 UX에 훨씬 좋습니다.

데모

브라우저 탭에 로고 표시

플랫폼 특정 크기의 모든 장치에 추가 할 수 있습니다

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">

결론적으로 모든 브라우저 가 실제로 favicon.ico 파일을 찾지 는 않습니다 . 일부 브라우저에서는 사용자가 자동으로 표시할지 여부를 선택할 수 있습니다. 따라서 항상 표시되고 확인되도록 하려면이를 정의해야합니다.