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"
rel
shortcut
제발 참고 그 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" />
사용하려는 이미지 형식에 따라 다릅니다.
웹 사이트의 아이콘이 있으면 UX에 훨씬 좋습니다.
결론적으로 모든 브라우저 가 실제로 favicon.ico 파일을 찾지 는 않습니다 . 일부 브라우저에서는 사용자가 자동으로 표시할지 여부를 선택할 수 있습니다. 따라서 항상 표시되고 확인되도록 하려면이를 정의해야합니다.
플랫폼 특정 크기의 모든 장치에 추가 할 수 있습니다
<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">
참고 URL : https://stackoverflow.com/questions/10218178/necessary-to-add-link-tag-for-favicon-ico
'programing tip' 카테고리의 다른 글
이미지를 Amazon ECR로 푸시 할 수 없음-“기본 인증 자격 증명이 없음”으로 실패 (0) | 2020.06.18 |
---|---|
char은 기본적으로 서명 또는 서명되지 않습니까? (0) | 2020.06.18 |
List (0) | 2020.06.18 |
때때로 사용하기가 좋지 (0) | 2020.06.17 |
문자열의 첫 문자를 제거 (0) | 2020.06.17 |