현재 파비콘을 지원하는 모든 브라우저에서 파비콘을 표시하는 가장 좋은 방법은 무엇입니까?

83

현재 파비콘을 지원하는 모든 브라우저에 표시 할 파비콘을 얻는 가장 좋은 방법은 무엇입니까?

포함하십시오 :

어떤 이미지 형식이 어떤 브라우저에서 지원되는지.
다양한 브라우저에서 어떤 위치에 필요한 줄.

html standards favicon

— 프레드
소스

1

iPhone 용 '파비콘'도 여기에 포함시킬 가치가 있습니다. 즉, 사용자가 홈 화면에 웹 사이트를 추가하기로 선택한 경우입니다. 이 경우에 사용되는 코드는 다음과 같습니다. <link rel = "apple-touch-icon"href = "touch.png"/> 크기는 57x57 픽셀이어야합니다. 또는 링크 태그를 생략하고 웹 사이트의 루트 디렉토리에 'apple-touch-icon.png'라는 파일을 넣을 수 있습니다.

— 다른

당신이 그것에있는 동안, 이것을 읽으십시오 : mathiasbynens.be/notes/touch-icons

— Zach Lysobey 2011

iPad 및 Retina iPhone 디스플레이에는 더 큰 아이콘이 필요합니다. 애플의 가이드 라인을 참조하십시오 : developer.apple.com/library/IOs/#documentation/...

— 마이크 Ottum

108

나는 벨트와 버팀대를 여기에 접근합니다.

나는 모두에 32 × 32 아이콘 생성 .ico과 .png라는 형식 favicon.ico과 favicon.png. 이전 브라우저를 다루지 않는 한 아이콘 이름은 실제로 중요하지 않습니다.

장소 favicon.ico선택 및 이전 버전의 브라우저에만 해당 오래된 브라우저 (지원 사이트 루트에.
내 이미지 하위 디렉토리에 favicon.png를 배치합니다 (정리를 유지하기 위해).
<head>요소 내부에 다음 HTML을 추가하십시오 .

<link rel = "icon"href = "/ images / favicon.png"type = "image / png"/>
<link rel = "shortcut icon"href = "/ favicon.ico"/>

점에 유의하시기 바랍니다:

.ico파일 의 MIME 유형 은 IANA에 의해 image / vnd.microsoft.icon으로 등록되었습니다 .
Internet Explorer는 type바로 가기 아이콘 관계에 대한 특성을 무시 하고이 관계를 지원하는 유일한 브라우저이므로 제공 할 필요가 없습니다.

참고

— 브라이언 매튜스
소스

2

좋아요, 저는 'Microsoft가 신경 쓰이는'날을 보내고 있습니다. stackoverflow 사이트에 대한 favicon이 표시된다는 사실에도 불구하고 Internet Explorer에서이 작업을 수행 할 수 없습니다. doctype과 같이 이에 영향을 미치는 다른 설정이 있습니까?

— belugabob

1

참고로-답을 찾았습니다. localhost : 8080 / index.html을 통해 사이트를 참조하면 작동하지 않습니다. 머신의 실제 이름 ( machineName : 8080 / index.html )을 사용하면 모든 것이 예상대로 작동합니다. 나는이 행동을 이해하기 시작조차 할 수 없다. 시도해 볼 사람이 있습니까?

— belugabob

2

업데이트-이 동작은 브라우저가 아이콘을 캐싱하여 발생합니다. 임시 인터넷 파일을 지우면 캐시를 잃어버린 기분이 든다면이 문제를 해결할 수 있습니다.

— belugabob

2

IE 조건부 주석에 IE 버전의 링크를 넣는 것이 더 깔끔할까요?

— EoghanM

9

32x32 ?? 16x16이 표준이 아닙니까?

— Eduardo Molteni

10

.ico 형식을 사용하고 <head>요소 내에 다음 두 줄을 넣습니다 .

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

— 존 토플 리
소스

6

태블릿 및 스마트 폰용 터치 아이콘도 지원하려면 HTML5Boilerplate 의 접근 방식을 선호합니다.

터치 아이콘에 대한 자세한 내용은 이 문서 에서 찾을 수 있습니다 .

브라우저 지원의 현재 상태를 사용하면 문서의 파비콘에 대한 HTML 태그를 추가 할 필요조차 없습니다. 브라우저는 파일 목록을 자동으로 검색합니다. iOS의 경우 다음 예를 참조하십시오.

HTML에 아이콘이 지정되지 않은 경우 iOS Safari는 웹 사이트의 루트 디렉토리에서 apple-touch-icon 또는 apple-touch-icon-precomposed 접두사가있는 아이콘을 검색합니다. 예를 들어, 장치의 적절한 아이콘 크기가 57 × 57 픽셀이면 iOS는 다음 순서로 파일 이름을 검색합니다.

apple-touch-icon-57x57-precomposed.png

apple-touch-icon-57x57.png

apple-touch-icon-precomposed.png

apple-touch-icon.png

내 조언은 문서에 파비콘을 포함하지 않고 루트 웹 사이트에 파일 목록을 준비하는 것입니다.

apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon.png (57px*57px)
favicon.ico HiDPI (32x32px)

html5boilerplate.com 에서 템플릿을 다운로드 할 때이 모든 것이 포함되어 있으므로 자신의 아이콘으로 교체하기 만하면됩니다.

— 빌렘 드 위트
소스

첫 번째 링크가 오래 되었습니다. 지금 github.com/h5bp/html5-boilerplate/blob/master/src/doc/… 로 이동해야합니다 . 내가 직접 편집했지만 문자가 충분하지 않습니다 : / 답변 해 주셔서 감사합니다!

— Brendan

5

구조를위한 Wikipedia

— Paul Tomblin
소스

4

IE6는 PNG를 올바르게 처리 할 수 없습니다.

— 민첩한
소스

3

Favicon은 모든 브라우저에서 제대로 작동하려면 .ico 파일 이어야 합니다.

최신 브라우저는 PNG 및 GIF 이미지도 지원합니다.

일반적으로 가장 쉬운 방법은 favicon.cc 와 같은 무료 웹 서비스를 사용하는 것 입니다.

— 안티 키사 니에미
소스

3

페이지의 파비콘이 어떻게 만들어 졌는지 확인할 수있는 사이트도 있습니다.

getfavicon.org

파비콘, 이미지 유형 및 해상도 만들기에 대한 자습서를 볼 수 있습니다.

더 이상 작동하지 않습니다.

— Roman Starkov 2014

2

를 갖는 favicon.*루트 디렉토리에 자동으로 대부분의 브라우저에서 감지된다. 다음을 사용하여 감지되었는지 확인할 수 있습니다.

 <link rel="icon" type="image/png" href="/path/image.png" />

개인적으로 .png 이미지를 사용하지만 대부분의 형식이 작동합니다.

— 로스
소스

아니요, "favicon. *"이 아닙니다. ico, png, gif, jpeg 및 SVG와 같은 소수의 형식 만 작동합니다. en.wikipedia.org/wiki/Favicon#File_format_support를 참조하십시오 .

— WhyNotHugo

1

이 질문에 대한 답은 충분히 복잡 해져서 가장 좋은 방법은 RealFaviconGenerator와 같은 도구를 사용하는 것입니다.이 도구를 사용하면 png / jpg를 업로드 한 다음 모든 플랫폼을 포함하는 파비콘과 코드를 생성 할 수 있습니다 : https : // realfavicongenerator. 그물/

— npfoss
소스