현재 파비콘을 지원하는 모든 브라우저에 표시 할 파비콘을 얻는 가장 좋은 방법은 무엇입니까?
포함하십시오 :
-
어떤 이미지 형식이 어떤 브라우저에서 지원되는지.
-
다양한 브라우저에서 어떤 위치에 필요한 줄.
답변
나는 벨트와 버팀대를 여기에 접근합니다.
나는 모두에 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바로 가기 아이콘 관계에 대한 특성을 무시 하고이 관계를 지원하는 유일한 브라우저이므로 제공 할 필요가 없습니다.
답변
.ico 형식을 사용하고 <head>요소 내에 다음 두 줄을 넣습니다 .
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
답변
태블릿 및 스마트 폰용 터치 아이콘도 지원하려면 HTML5Boilerplate 의 접근 방식을 선호합니다.
터치 아이콘에 대한 자세한 내용은 이 문서 에서 찾을 수 있습니다 .
브라우저 지원의 현재 상태를 사용하면 문서의 파비콘에 대한 HTML 태그를 추가 할 필요조차 없습니다. 브라우저는 파일 목록을 자동으로 검색합니다. iOS의 경우 다음 예를 참조하십시오.
HTML에 아이콘이 지정되지 않은 경우 iOS Safari는 웹 사이트의 루트 디렉토리에서 apple-touch-icon 또는 apple-touch-icon-precomposed 접두사가있는 아이콘을 검색합니다. 예를 들어, 장치의 적절한 아이콘 크기가 57 × 57 픽셀이면 iOS는 다음 순서로 파일 이름을 검색합니다.
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-57×57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
내 조언은 문서에 파비콘을 포함하지 않고 루트 웹 사이트에 파일 목록을 준비하는 것입니다.
- apple-touch-icon-114×114-precomposed.png
- apple-touch-icon-144×144-precomposed.png
- apple-touch-icon-57×57-precomposed.png
- apple-touch-icon-72×72-precomposed.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
(57px*57px) - favicon.ico
HiDPI (32x32px)
html5boilerplate.com 에서 템플릿을 다운로드 할 때이 모든 것이 포함되어 있으므로 자신의 아이콘으로 교체하기 만하면됩니다.
답변
답변
IE6는 PNG를 올바르게 처리 할 수 없습니다.
답변
Favicon은 모든 브라우저에서 제대로 작동하려면 .ico 파일 이어야 합니다.
최신 브라우저는 PNG 및 GIF 이미지도 지원합니다.
일반적으로 가장 쉬운 방법은 favicon.cc 와 같은 무료 웹 서비스를 사용하는 것 입니다.
