<link rel =“icon”href =“favicon.ico”type =“image / x-icon”/>을 포함해야합니까?


205

헤드 태그에 다음 코드 줄을 포함시키지 않았지만 브라우저에 즐겨 찾기 아이콘이 계속 나타납니다.

<link rel="icon" href="favicon.ico" type="image/x-icon" />

그것을 포함하는 목적은 무엇입니까?

답변:


174

즐겨 찾기 아이콘을 호출하지 않으면 favicon.ico해당 태그를 사용하여 images/디렉토리에 실제 경로가있는 경우 실제 경로를 지정할 수 있습니다 . 브라우저 / 웹 페이지는 favicon.ico기본적으로 루트 디렉토리에서 찾습니다 .


3
또는 루트 폴더에 favicon.ico가 없지만 자산 폴더에있는 경우
— Upvote

121

모든 브라우저에서 아이콘을 찾을 수 있도록 실제로 두 가지를 모두 수행해야합니다.

파일 "favicon.ico"의 이름을 지정하고 웹 사이트의 루트에 배치하는 것은 W3C의 "감지 된"방법입니다.

방법 2 (점검 됨) : 미리 정의 된 URI
에 즐겨 찾기 아이콘 배치하기 즐겨 찾기 아이콘을 지정하는 두 번째 방법은 미리 정의 된 URI를 사용하여 이미지를 식별하는 것입니다 : "/ favicon". 서버 루트에 상대적입니다. 이 방법은 일부 브라우저가 해당 URI를 사용하여 즐겨 찾기 아이콘을 찾도록 프로그래밍 되었기 때문에 작동합니다.
W3C-사이트에 파비콘을 추가하는 방법

따라서 모든 상황을 다루기 위해 "rel"속성을 추가하고 동일한 .ico 파일을 가리키는 권장 방법 외에도 항상이 작업을 수행합니다.


8
예, 이것이 더 정답입니다. 단순히 favicon.ico루트에 넣는 것과 관련된 표준은 없지만 대부분의 브라우저는 역사적 이유로 자동으로 해당 파일을 요청합니다.
— Fabrício Matté

10
이를 수행하는 적절한 이유 는 일부 상황 에서는 작동하기 때문 이 아니라 일부 상황 에서는 더 나은 방법이 작동하지 않기 때문입니다.
— Jasper

2
흥미롭게도 realFaviconGenerator 는 HTML 헤드에서 즐겨 찾기 아이콘을 선언 하지 않는 것이 좋습니다 .
— Dan Dascalescu

7
Internet Explorer 는 파비콘을 발명 하여 루트에서 찾았습니다. AFAIK, 모든 브라우저에서이 작업을 수행합니다. favicon.ico를 루트에 넣는 것이 좋습니다. 그렇지 않으면 404를 반환하고 대부분의 시스템은 캐시하지 않으므로 계속 요청합니다. 거기에 아이콘을 넣으면 제대로 캐시됩니다.
— Stijn de Witt

50

두 가지 이유로 사용합니다.

  1. 예를 들어 쿼리 매개 변수를 추가하여 아이콘을 새로 고칠 수 있습니다 ?v=2. 이처럼 : <link rel="icon" href="https://stackoverflow.com/favicon.ico?v=2" type="image/x-icon" />

  2. 경로를 지정 해야하는 경우.


굉장, 왜 그것이 보이지 않는지 알아 냈습니다!
— whamsicore

나는 이것이 오타 일 것이라고 확신하지만 거기에 상대 href가있어 모든 페이지가 최상위에 있거나 모든 하위 디렉토리에 favicon.ico 파일이 없으면 작동하지 않습니다.
— Chris Cogdon

나중에 독자에게 참고로 Chris Cogdon의 의견은 "9 월 16 일 5:05에 편집"에서 수정되었으므로 더 이상 문제가 없습니다
— Daryn

13

루트 폴더에 단순히 추가하면 멋지게 작동하지만 파비콘을 변경 해야하는 경우 업데이트하는 데 며칠이 걸릴 수 있습니다 ... 캐시 새로 고침조차도 트릭을 수행하지 않습니다.


Ctrl-C & Rebuild를 잊지 마십시오.
— Jason Glass

9

많은 사람들이 쿠키 경로를 /로 설정합니다. 이로 인해 모든 즐겨 찾기 아이콘 요청이 최소한 크롬으로 사이트 쿠키 사본을 보내 게됩니다. 쿠키없는 도메인으로 즐겨 찾기 아이콘을 지정하면이 문제가 해결됩니다.

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

트래픽 양에 따라 링크를 추가하는 가장 실용적인 이유 일 수 있습니다.

쿠키없는 도메인 설정에 대한 정보 :

http://www.ravelrumba.com/blog/static-cookieless-domain/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.