<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.